TS學習隨筆（二)->類型推論，聯合類型

 

這篇內容指南：

　　　       -----類型推論

　　　　 -----聯合類型

 

類型推論

第一篇中我們看了TS的基本使用和基本數據類型的使用，知道了變量在使用的時候都得加一個類型，那我們可不可以不加呢，這個嘛，可以也不可以，為啥這木說呢，各位看官我們上眼瞧一下.

首先我們要來先了解一個概念，類型推論：如果沒有明確的指定類型，那么 TypeScript 會依照類型推論（Type Inference）的規則推斷出一個類型

例子一:

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

看吧，沒指定類型報錯了吧。因為這樣賦值等同於

　　　let myFavoriteNumber: string = 'seven';

但是我為啥說的是可以也不可以呢，來，我們繼續瞧一瞧

例子二：

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

哎，這樣咋沒報錯，其實在定義的時候沒有賦值，不管之后有沒有賦值，都會被推斷成 any 類型而完全不被類型檢查

這就是JS的類型推論，是不是美滋滋，這樣媽媽就再也不擔心我參數類型傳的有問題了

 

聯合類型

　　我們想想會不會有這個情景，一個變量我們既允許他是string又可以是number，那我們怎么辦呢，用any嗎？顯然是不行的，用any那不是什么類型都能傳進去了，那我們怎么做呢，這里就又要亮出一個概念了

　　　這就是我們要說的聯合類型，這個概念一看就知道是把幾個類型聯合起來，那怎么實現啵，跟概念一樣簡潔明了

let Adam:string | number
Adam =  'seven';
Adam = 7

let Sh：string | number
Sh = true
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
//   Type 'boolean' is not assignable to type 'number'.

聯合類型使用 | 分隔每個類型。

注意：當 TypeScript 不確定一個聯合類型的變量到底是哪個類型的時候，我們只能訪問此聯合類型的所有類型里共有的屬性或方法

function getLength(something: string | number): number {
    return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

上述例子會報錯，是因為length並不是string和number的公共方法

訪問 string 和 number 的共有屬性是沒問題的：

function getString(something: string | number): string {
    return something.toString();
}

聯合類型的變量在被賦值的時候，會根據類型推論的規則推斷出一個類型：

 

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 編譯時報錯

// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中，第二行的 myFavoriteNumber 被推斷成了 string，訪問它的 length 屬性不會報錯。

而第四行的 myFavoriteNumber 被推斷成了 number，訪問它的 length 屬性時就報錯了。

 

原文參考自：https://github.com/xcatliu/typescript-tutorial/blob/master/basics/union-types.md