TypeScript基礎入門之高級類型的類型保護與區分類型

轉發

TypeScript基礎入門之高級類型的類型保護與區分類型

 

項目實踐倉庫

https://github.com/durban89/typescript_demo.git
tag: 1.4.3

爲了保證後面的學習演示須要安裝下ts-node，這樣後面的每一個操做都能直接運行看到輸出的結果。

npm install -D ts-node

後面本身在練習的時候能夠這樣使用

npx ts-node 腳本路徑

繼續分享高級類型相關的基礎知識，有人說我是抄官網的，我想說，有多少人把官網的例子從頭看了一邊而後又照着抄了一遍，雖然效率很慢，可是我在這個過程當中可以知道官網寫例子跟說的話是否都是正確的，須要本身去驗證下，咱們就是由於太多的照貓畫虎、依葫蘆畫瓢致使咱們今天技術上沒有太多的成就，我但願你們在學習技術的時候，可以踏踏實實的學習一下，知識學到了是你本身的，尤爲是寫代碼，不要讓別人以爲今天的程序員沒有價值。
打個比方，有人以爲寫代碼實現功能就能夠了，可是我想說，這個是做爲一個非技術公司的結果，但願你們去技術型公司，否則老闆今天讓你改明天讓你改，改到最後，你都不知道本身在作神馬，並且你寫的代碼給誰看？寫的東西就是垃圾，不說寫的多漂亮，至少咱們能夠對得起本身的花的時間，不要以爲去網上找個例子就抄抄，寫寫東西就很牛了，其實裏面的東西差的不僅是表面，這個年代，該讓本身沉澱一下了，別太浮躁，如今不是戰爭年代，咱們要有更高的追求。廢話很少說繼續基礎分享。

高級類型

類型保護與區分類型（Type Guards and Differentiating Types）

從上一篇文章【TypeScript基礎入門之高級類型的交叉類型和聯合類型】的分享中咱們能夠了解到，聯合類型適合於那些值能夠爲不一樣類型的狀況。 但當咱們想確切地瞭解是否爲某個類型時怎麼辦？ JavaScript裏經常使用來區分2個可能值的方法是檢查成員是否存在。 如上一篇文章文章【TypeScript基礎入門之高級類型的交叉類型和聯合類型】中以前說起的，咱們只能訪問聯合類型中共同擁有的成員。以下實例，訪問任何一個非公有成員，程序編譯的時候都會報錯

interface Type1 {
    func1(): void;
    func2(): void;
}

interface Type2 {
    func3(): void;
    func2(): void;
}

class Type1Class implements Type1 {
    func1(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

class Type2Class implements Type2 {
    func3(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

function getSomeType(type: string): Type1Class | Type2Class {
    if (type === '1') {
        return new Type1Class();
    }

    if (type === '2') {
        return new Type2Class();
    }

    throw new Error(`Excepted Type1Class or Type2Class, got ${type}`);
}

let type = getSomeType('1');
type.func2();
if (type.func1) {
    type.func1(); // 報錯
} else if (type.func3) {
    type.func3(); // 報錯
}

編譯並運行後獲得以下結果

$ tsc ./src/advanced_types_2.ts
src/advanced_types_2.ts:45:10 - error TS2551: Property 'func1' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func1' does not exist on type 'Type2Class'.

45 if (type.func1) {
            ~~~~~

src/advanced_types_2.ts:46:10 - error TS2551: Property 'func1' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func1' does not exist on type 'Type2Class'.

46     type.func1(); // 報錯
            ~~~~~

src/advanced_types_2.ts:47:17 - error TS2551: Property 'func3' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func3' does not exist on type 'Type1Class'.

47 } else if (type.func3) {
                   ~~~~~

src/advanced_types_2.ts:48:10 - error TS2551: Property 'func3' does not exist on type 'Type1Class | Type2Class'. Did you mean 'func2'?
  Property 'func3' does not exist on type 'Type1Class'.

48     type.func3(); // 報錯

爲了讓這段代碼工做，咱們要使用類型斷言，以下：

interface Type1 {
    func1(): void;
    func2(): void;
}

interface Type2 {
    func3(): void;
    func2(): void;
}

class Type1Class implements Type1 {
    func1(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

class Type2Class implements Type2 {
    func3(): void {
        console.log('func1 run');
    }

    func2(): void {
        console.log('func2 run');
    }
}

function getSomeType(type: string): Type1Class | Type2Class {
    if (type === '1') {
        return new Type1Class();
    }

    if (type === '2') {
        return new Type2Class();
    }

    throw new Error(`Excepted Type1Class or Type2Class, got ${type}`);
}

let type = getSomeType('1');
type.func2();
if ((<Type1Class>type).func1) {
    (<Type1Class>type).func1();
} else if ((<Type2Class>type).func3) {
    (<Type2Class>type).func3();
}

編譯並運行後獲得以下結果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
func2 run
func1 run  

用戶自定義的類型保護

這裏能夠注意到咱們不得很少次使用類型斷言。 倘若咱們一旦檢查過類型，就能在以後的每一個分支裏清楚地知道let type = getSomeType('1')的類型的話就行了。

TypeScript裏的 類型保護機制讓它成爲了現實。 類型保護就是一些表達式，它們會在運行時檢查以確保在某個做用域裏的類型。 要定義一個類型保護，咱們只要簡單地定義一個函數，它的返回值是一個"類型謂詞"，以下實例

function isType1(type: Type1Class | Type2Class): type is Type1Class {
    return (<Type1Class>type).func1 !== undefined;
}

在這個例子裏，"type is Type1Class"就是類型謂詞。 謂詞爲 parameterName is Type這種形式， parameterName必須是來自於當前函數簽名裏的一個參數名。

每當使用一些變量調用isType1時，若是原始類型兼容，TypeScript會將該變量縮小到該特定類型。以下

if(isType1(type)) {
    type.func1()
} else {
    type.func3();
}

注意意TypeScript不只知道在if分支裏Type是Type1Class類型；它還清楚在else分支裏，必定不是Type1Class類型，必定是Type2Class類型。

typeof類型保護

我以上篇文章[TypeScript基礎入門之高級類型的交叉類型和聯合類型]的padLeft代碼的代碼爲例，看看如何使用聯合類型來改寫padLeft。 能夠像下面這樣利用類型斷言來寫：

function isNumber(x: any): x is number {
    return typeof x === "number";
}

function isString(x: any): x is string {
    return typeof x === "string";
}

function padLeft(value: string, padding: string | number) {
    if (isString(padding)) {
        return padding + value;
    }

    if (isNumber(padding)) {
        return Array(padding + 1).join(' ') + value;
    }

    throw new Error(`Excepted string or number, got ${padding}`);
}

console.log("|" + padLeft("string", 4) + "|");
console.log("|" + padLeft("string", "a") + "|");

編譯並運行後獲得以下結果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
|    string|
|astring|    

然而，必需要定義一個函數來判斷類型是不是原始類型，這太痛苦了。 幸運的是，如今咱們沒必要將typeof x === "number"抽象成一個函數，由於TypeScript能夠將它識別爲一個類型保護。 也就是說咱們能夠直接在代碼裏檢查類型了。代碼和上篇文章是同樣的，省去了定義函數的痛苦。

function padLeft(value: string, padding: string | number) {
    if (typeof padding === 'string') {
        return padding + value;
    }

    if (typeof padding === 'number') {
        return Array(padding + 1).join(' ') + value;
    }

    throw new Error(`Excepted string or number, got ${padding}`);
}

這些**typeof類型保護**只有兩種形式能被識別：typeof v === "typename"和typeof v !== "typename"， "typename"必須是"number"，"string"，"boolean"或"symbol"。 可是TypeScript並不會阻止你與其它字符串比較，語言不會把那些表達式識別爲類型保護。

instanceof類型保護

instanceof類型保護是經過構造函數來細化類型的一種方式。 好比，咱們借鑑一下以前字符串填充的例子：

interface PadInterface {
    getPadString(): string;
}

class SpacePad implements PadInterface {
    constructor(private num: number){}
    getPadString(): string {
        return Array(this.num + 1).join(' ');
    }
}

class StringPad implements PadInterface {
    constructor(private string: string) { }
    getPadString(): string {
        return this.string;
    }
}

function getRandomPad() {
    return Math.random() < 0.5 ? 
    new SpacePad(5) :
    new StringPad(" ");
}

let pad: PadInterface = getRandomPad();
if (pad instanceof SpacePad) {
    console.log("|" + pad.getPadString() + "string|")
}

if (pad instanceof StringPad) {
    console.log("|" + pad + "string|")
}

第一次編譯並運行後獲得以下結果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
|     string|

第二次編譯並運行後獲得以下結果

$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
| string|

instanceof的右側要求是一個構造函數，TypeScript將細化爲：

• 此構造函數的prototype屬性的類型，若是它的類型不爲any的話
• 構造簽名所返回的類型的聯合

以此順序。

本實例結束實踐項目地址

https://github.com/durban89/typescript_demo.git
tag: 1.4.4