如何從JavaScript跨越到TypeScript [基礎進階知識點]

從入門到放棄的java

• 初中時自學過JAVA，學了大概一個多月吧， 學了一個多月，看視頻這些，後面放棄了編程。 依稀記得，那段日子極度苦逼，我想若是當時是學javaScript就行了。
• 說正事，typeScript如今真的很火，聽過一句話，大項目，好點的公司，必須上typeScript，還有React，沒有爲何，這裏並非說其餘的技術很差，只是說大型項目，最好TS，它對於咱們後期代碼維護，前期的調試能省去不少時間。
• Node.js之快速搭建微信公衆號服務器
• Node.js之快速搭建服務器+先後端數據庫session交互
• ES6教程全篇
• 前端中大廠面試必問 原生javaScript操做

---

想學習typeScript，我以爲你首先要對原生javaScript很是熟練，最基礎的知識最重要，而後要掌握ES5+ES6+ES7（7之後的最好知道一些），新技術掌握了，之後就不會那麼累。 typeScript =type+ javaScript ，在ES5/6/7+javaScript基礎上加了一個type!

• TS相對JS來講，它真的很是嚴格，只要稍微不匹配接口或者值的類型，又或者是參數的個數不對，值改變後跟原值類型不

一致，都會致使報錯。 建議使用npm 全局安裝typeScript 而後使用 tsc *.ts 進行編譯TS文件

• 'typeScript的新增核心概念:'
• let app:string=2;這段代碼就會報錯，由於值 2 是一個number，而規定app是string類型，這樣在TS中會報錯的

---

新增值的類型：

• any:能夠是任意類型
• vold:一個空的返回類型，好比function move():vold{} 這樣表明這個函數沒有返回值 ，若是換成any，那麼就隨便這個

函數返回什麼類型，可是他必須return 不然TS會報錯

---

新增概念：類型推論

• let app = 'hello' ; app=1 ; 這段代碼就會報錯，由於TS把他當成了 let app:string = 'hello',再次改變

app的值，必須是string類型，不然報錯 ，這就是類型推論

---

聯合類型

• let app: string | number = 'hello' ; app = 1; 這段代碼是不會報錯的，由於app是一個聯合類型的變量，它便可以是

string又能夠是number，只要符合其中一個類型便可，固然你也能夠寫更多個。

---

接口 interface (前端程序員很難理解的點)

• javaScript也是一門面向對象的語言，可是ES5中它是基於原型實現的，ES6中使用了class類，這樣會更清晰的體會到

面向對象這一說法，可是實際在TS中的面向對象更加完整，它跟JAVA這些語言同樣，經過接口和類去完整的面向對象編程。

• 你能夠把對象想象成一個女人 （在TS中抽象成一個變量 let app ）
• 咱們使用接口去描述這個女人 （在TS中使用 let app : interfacename）
• 最後使用一些方法去得到這個女人的聯繫方式 （在TS中使用class類裏面的方法去實現）

好比 ：

class ask{

    name:string;
    
    tel ? :number  ;   //這裏爲何加問號，由於你不必定能拿到她的號碼，若是拿不到，那麼即可以不傳參數，
    
    可是若是不加? ，你又沒那麼號碼，那麼你沒有參數傳進來，TS就會報錯 
    
    age:number ;
    
    constructor(name,age,tel){
         this.name=name;
         this.age=age;
         this.tel=tel
    }
}

interface check {

    name : string;
    
    age:number;
    
    tel ? :number;  
    
}

let woman :check = new ask ('rose',20,1888888888);//假設你拿到美女全部資料 傳入構造函數

這樣你能夠打印一把 console.log(woman)，看看它是怎樣的，上面這段代碼是沒有報錯的。

• 上面的代碼經過tsc命令編譯成JS文件後

var ask = /* @class / (function () {

function ask(name, age, tel) {


    this.name = name;
    
    
    this.age = age;
    
    
    this.tel = tel;
    
    
}
return ask;

}());

let woman = new ask('rose', 20, 1888888888);

console.log(woman)

"這裏要注意，不少TS的代碼編譯後，是不會出如今JS文件中，好比const enum的枚舉， interface這些，固然後面還會遇到更多"




-------------


### 元組的概念

• JS中的數組，能儲存大量的內容，所謂的元祖，其實就是數據類型的不一樣的數組
• [1,'1',true,false] 其實這個就是一個元組，只是叫法不同。

-------


### 枚舉 enum 和 const enum的區別

• enum app { red, blue, pink, deeppink }
• console.log(app.red, app.blue, app.pink, app.deeppink) // 輸出0,1,2,3

• enum app2 { red = 2, blue, pink, deeppink }
• console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // 輸出2,3,4,5
• 枚舉默認的第一個值是0；也能夠本身定義，若是自定義和系統默認的衝突，TS是不認識的，

他也不會報錯，可是我不建議你這樣作，畢竟誰沒事找事呢？

### 還有一種常量枚舉

const enum Directions {

Up,
Down,
Left,
Right

}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// 結果是 0 1 2 3

* 假如包含了計算成員，則會在編譯階段報錯：

 * const enum Color {Red, Green, Blue = "blue".length};   

* 常數枚舉與普通枚舉的區別是，它會在編譯階段被刪除，而且不能包含計算成員。  一試便知

---

類和接口 （最重要的之一）

* 一個類一次只能夠繼承一個接口，可是能夠一次對應多個接口
* 要想實現多個類繼承，那麼使用子類繼續繼承其餘類，循環下去

interface check {

name: string;
age: number;
hobby: Array<number>
fuck: number[]   //這兩種寫法是同樣的

}

class exp implements check {

name: string
age: number
hobby:Array<number>
fuck: number[]
constructor(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}

}

let app = new exp('hello', 18, [1, 2, 3], [2, 3, 4])

-------通過TS編譯後獲得

var exp = /* @class / (function () {

function exp(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
return exp;

}());
var app = new exp('hello', 18, [1, 2, 3], [2, 3, 4]);

typeScript可能最難的就是如何理解優雅的面向對象編程，接口interface只是爲了描述而已，


真正去實現，須要class類去實現，ES6在typeScript中位置舉足輕重，

因此我建議你先去學習原生javaScript+ES6再來學習typeScript，那樣會輕鬆不少，


下面放一個阮一峯的ES6的學習文檔連接，裏面寫得很是詳細，必定要認真看。 

 
[ECMAScript 6 入門](http://es6.ruanyifeng.com/)