轉(zhuǎn)發(fā)

TypeScript基礎(chǔ)入門之高級類型的類型保護與區(qū)分類型

項目實踐倉庫

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

為了保證后面的學(xué)習(xí)演示需要安裝下ts-node，這樣后面的每個操作都能直接運行看到輸出的結(jié)果。

npm install -D ts-node

后面自己在練習(xí)的時候可以這樣使用

npx ts-node 腳本路徑

繼續(xù)分享高級類型相關(guān)的基礎(chǔ)知識，有人說我是抄官網(wǎng)的，我想說，有多少人把官網(wǎng)的例子從頭看了一邊然后又照著抄了一遍，雖然效率很慢，但是我在這個過程中能夠知道官網(wǎng)寫例子跟說的話是否都是正確的，需要自己去驗證下，我們就是因為太多的照貓畫虎、依葫蘆畫瓢導(dǎo)致我們今天技術(shù)上沒有太多的成就，我希望大家在學(xué)習(xí)技術(shù)的時候，能夠踏踏實實的學(xué)習(xí)一下，知識學(xué)到了是你自己的，尤其是寫代碼，不要讓別人覺得今天的程序員沒有價值。
打個比方，有人覺得寫代碼實現(xiàn)功能就可以了，但是我想說，這個是作為一個非技術(shù)公司的結(jié)果，希望大家去技術(shù)型公司，不然老板今天讓你改明天讓你改，改到最后，你都不知道自己在做神馬，而且你寫的代碼給誰看？寫的東西就是垃圾，不說寫的多漂亮，至少我們可以對得起自己的花的時間，不要覺得去網(wǎng)上找個例子就抄抄，寫寫東西就很牛了，其實里面的東西差的不只是表面，這個年代，該讓自己沉淀一下了，別太浮躁，現(xiàn)在不是戰(zhàn)爭年代，我們要有更高的追求。廢話不多說繼續(xù)基礎(chǔ)分享。

高級類型

類型保護與區(qū)分類型（Type Guards and Differentiating Types）

從上一篇文章【TypeScript基礎(chǔ)入門之高級類型的交叉類型和聯(lián)合類型】的分享中我們可以了解到，聯(lián)合類型適合于那些值可以為不同類型的情況。但當(dāng)我們想確切地了解是否為某個類型時怎么辦？ JavaScript里常用來區(qū)分2個可能值的方法是檢查成員是否存在。如上一篇文章文章【TypeScript基礎(chǔ)入門之高級類型的交叉類型和聯(lián)合類型】中之前提及的，我們只能訪問聯(lián)合類型中共同擁有的成員。如下實例，訪問任何一個非公有成員，程序編譯的時候都會報錯

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(); // 報錯
}

編譯并運行后得到如下結(jié)果

$ 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();
}

編譯并運行后得到如下結(jié)果

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

用戶自定義的類型保護

這里可以注意到我們不得不多次使用類型斷言。假若我們一旦檢查過類型，就能在之后的每個分支里清楚地知道let type = getSomeType('1')的類型的話就好了。

TypeScript里的類型保護機制讓它成為了現(xiàn)實。類型保護就是一些表達式，它們會在運行時檢查以確保在某個作用域里的類型。要定義一個類型保護，我們只要簡單地定義一個函數(shù)，它的返回值是一個"類型謂詞"，如下實例

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

在這個例子里，"type is Type1Class"就是類型謂詞。謂詞為 parameterName is Type這種形式， parameterName必須是來自于當(dāng)前函數(shù)簽名里的一個參數(shù)名。

每當(dāng)使用一些變量調(diào)用isType1時，如果原始類型兼容，TypeScript會將該變量縮小到該特定類型。如下

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

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

typeof類型保護

我以上篇文章[TypeScript基礎(chǔ)入門之高級類型的交叉類型和聯(lián)合類型]的padLeft代碼的代碼為例，看看如何使用聯(lián)合類型來改寫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") + "|");

編譯并運行后得到如下結(jié)果

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

然而，必須要定義一個函數(shù)來判斷類型是否是原始類型，這太痛苦了。幸運的是，現(xiàn)在我們不必將typeof x === "number"抽象成一個函數(shù)，因為TypeScript可以將它識別為一個類型保護。也就是說我們可以直接在代碼里檢查類型了。代碼和上篇文章是一樣的，省去了定義函數(shù)的痛苦。

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類型保護****只有兩種形式能被識別：<kbd style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(255, 255, 255); background-color: rgb(51, 51, 51); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px inset;">typeof v === "typename"</kbd>和<kbd style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12.6px; padding: 2px 4px; color: rgb(255, 255, 255); background-color: rgb(51, 51, 51); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px inset;">typeof v !== "typename"</kbd>， "typename"必須是"number"，"string"，"boolean"或"symbol"。但是TypeScript并不會阻止你與其它字符串比較，語言不會把那些表達式識別為類型保護。

instanceof類型保護

instanceof類型保護是通過構(gòu)造函數(shù)來細(xì)化類型的一種方式。比如，我們借鑒一下之前字符串填充的例子：

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|")
}

第一次編譯并運行后得到如下結(jié)果

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

第二次編譯并運行后得到如下結(jié)果

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

instanceof的右側(cè)要求是一個構(gòu)造函數(shù)，TypeScript將細(xì)化為：

此構(gòu)造函數(shù)的prototype屬性的類型，如果它的類型不為any的話
構(gòu)造簽名所返回的類型的聯(lián)合

以此順序。

本實例結(jié)束實踐項目地址

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

TypeScript基礎(chǔ)入門之高級類型的類型保護與區(qū)分類型