你所需要擁抱的TypeScript [技術貼]

Jeery_譚金傑發表於2019-03-13
TypeScript

從入門到放棄的java

  • 初中時自學過JAVA，學了大概一個多月吧， 學了一個多月，看視訊這些，後面放棄了程式設計。 依稀記得，那段日子極度苦逼，我想如果當時是學javaScript就好了。

  • 說正事，typeScript現在真的很火，聽過一句話，大專案，好點的公司，必須上typeScript，還有React，沒有為什麼，這裡並不是說其他的技術不好，只是說大型專案，最好TS，它對於我們後期程式碼維護，前期的除錯能省去很多時間。

想學習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 入門

後期我將會繼續更新 ，針對ES6以及typeScript的最新理解等。

相關文章