轉發
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類型保護****只有兩種形式能被識別：<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類型保護是通過構造函數來細化類型的一種方式。 比如，我們借鑒一下之前字符串填充的例子：
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
