轉(zhuǎn)發(fā)
TypeScript基礎(chǔ)入門(mén)之高級(jí)類型的類型保護(hù)與區(qū)分類型
項(xiàng)目實(shí)踐倉(cāng)庫(kù)
https://github.com/durban89/typescript_demo.git
tag: 1.4.3
為了保證后面的學(xué)習(xí)演示需要安裝下ts-node，這樣后面的每個(gè)操作都能直接運(yùn)行看到輸出的結(jié)果捷枯。
npm install -D ts-node
后面自己在練習(xí)的時(shí)候可以這樣使用
npx ts-node 腳本路徑
繼續(xù)分享高級(jí)類型相關(guān)的基礎(chǔ)知識(shí)滚秩，有人說(shuō)我是抄官網(wǎng)的，我想說(shuō)淮捆，有多少人把官網(wǎng)的例子從頭看了一邊然后又照著抄了一遍郁油，雖然效率很慢，但是我在這個(gè)過(guò)程中能夠知道官網(wǎng)寫(xiě)例子跟說(shuō)的話是否都是正確的攀痊，需要自己去驗(yàn)證下桐腌，我們就是因?yàn)樘嗟恼肇埉?huà)虎、依葫蘆畫(huà)瓢導(dǎo)致我們今天技術(shù)上沒(méi)有太多的成就蚕苇，我希望大家在學(xué)習(xí)技術(shù)的時(shí)候哩掺，能夠踏踏實(shí)實(shí)的學(xué)習(xí)一下，知識(shí)學(xué)到了是你自己的涩笤，尤其是寫(xiě)代碼，不要讓別人覺(jué)得今天的程序員沒(méi)有價(jià)值盒件。
打個(gè)比方蹬碧，有人覺(jué)得寫(xiě)代碼實(shí)現(xiàn)功能就可以了，但是我想說(shuō)炒刁，這個(gè)是作為一個(gè)非技術(shù)公司的結(jié)果恩沽，希望大家去技術(shù)型公司，不然老板今天讓你改明天讓你改翔始，改到最后罗心，你都不知道自己在做神馬里伯，而且你寫(xiě)的代碼給誰(shuí)看？寫(xiě)的東西就是垃圾渤闷，不說(shuō)寫(xiě)的多漂亮疾瓮，至少我們可以對(duì)得起自己的花的時(shí)間，不要覺(jué)得去網(wǎng)上找個(gè)例子就抄抄飒箭，寫(xiě)寫(xiě)東西就很牛了狼电，其實(shí)里面的東西差的不只是表面，這個(gè)年代弦蹂，該讓自己沉淀一下了肩碟，別太浮躁，現(xiàn)在不是戰(zhàn)爭(zhēng)年代凸椿，我們要有更高的追求削祈。廢話不多說(shuō)繼續(xù)基礎(chǔ)分享。
高級(jí)類型
類型保護(hù)與區(qū)分類型（Type Guards and Differentiating Types）
從上一篇文章【TypeScript基礎(chǔ)入門(mén)之高級(jí)類型的交叉類型和聯(lián)合類型】的分享中我們可以了解到脑漫，聯(lián)合類型適合于那些值可以為不同類型的情況岩瘦。 但當(dāng)我們想確切地了解是否為某個(gè)類型時(shí)怎么辦？ JavaScript里常用來(lái)區(qū)分2個(gè)可能值的方法是檢查成員是否存在窿撬。 如上一篇文章文章【TypeScript基礎(chǔ)入門(mén)之高級(jí)類型的交叉類型和聯(lián)合類型】中之前提及的启昧，我們只能訪問(wèn)聯(lián)合類型中共同擁有的成員。如下實(shí)例劈伴，訪問(wèn)任何一個(gè)非公有成員密末，程序編譯的時(shí)候都會(huì)報(bào)錯(cuò)
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(); // 報(bào)錯(cuò)
} else if (type.func3) {
type.func3(); // 報(bào)錯(cuò)
}
編譯并運(yùn)行后得到如下結(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(); // 報(bào)錯(cuò)
~~~~~
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(); // 報(bào)錯(cuò)
為了讓這段代碼工作，我們要使用類型斷言跛璧，如下：
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();
}
編譯并運(yùn)行后得到如下結(jié)果
$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
func2 run
func1 run
用戶自定義的類型保護(hù)
這里可以注意到我們不得不多次使用類型斷言严里。 假若我們一旦檢查過(guò)類型，就能在之后的每個(gè)分支里清楚地知道let type = getSomeType('1')的類型的話就好了追城。
TypeScript里的 類型保護(hù)機(jī)制讓它成為了現(xiàn)實(shí)刹碾。 類型保護(hù)就是一些表達(dá)式，它們會(huì)在運(yùn)行時(shí)檢查以確保在某個(gè)作用域里的類型座柱。 要定義一個(gè)類型保護(hù)迷帜，我們只要簡(jiǎn)單地定義一個(gè)函數(shù)，它的返回值是一個(gè)"類型謂詞"色洞，如下實(shí)例
function isType1(type: Type1Class | Type2Class): type is Type1Class {
return (<Type1Class>type).func1 !== undefined;
}
在這個(gè)例子里戏锹，"type is Type1Class"就是類型謂詞。 謂詞為 parameterName is Type這種形式火诸， parameterName必須是來(lái)自于當(dāng)前函數(shù)簽名里的一個(gè)參數(shù)名锦针。
每當(dāng)使用一些變量調(diào)用isType1時(shí)，如果原始類型兼容，TypeScript會(huì)將該變量縮小到該特定類型奈搜。如下
if(isType1(type)) {
type.func1()
} else {
type.func3();
}
注意意TypeScript不僅知道在if分支里Type是Type1Class類型悉盆；它還清楚在else分支里，一定不是Type1Class類型馋吗，一定是Type2Class類型焕盟。
typeof類型保護(hù)
我以上篇文章[TypeScript基礎(chǔ)入門(mén)之高級(jí)類型的交叉類型和聯(lián)合類型]的padLeft代碼的代碼為例，看看如何使用聯(lián)合類型來(lái)改寫(xiě)padLeft耗美。 可以像下面這樣利用類型斷言來(lái)寫(xiě)：
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") + "|");
編譯并運(yùn)行后得到如下結(jié)果
$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
| string|
|astring|
然而京髓，必須要定義一個(gè)函數(shù)來(lái)判斷類型是否是原始類型，這太痛苦了商架。 幸運(yùn)的是堰怨，現(xiàn)在我們不必將typeof x === "number"抽象成一個(gè)函數(shù)，因?yàn)門(mén)ypeScript可以將它識(shí)別為一個(gè)類型保護(hù)蛇摸。 也就是說(shuō)我們可以直接在代碼里檢查類型了备图。代碼和上篇文章是一樣的，省去了定義函數(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類型保護(hù)****只有兩種形式能被識(shí)別：<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并不會(huì)阻止你與其它字符串比較，語(yǔ)言不會(huì)把那些表達(dá)式識(shí)別為類型保護(hù)敬辣。
instanceof類型保護(hù)
instanceof類型保護(hù)是通過(guò)構(gòu)造函數(shù)來(lái)細(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|")
}
第一次編譯并運(yùn)行后得到如下結(jié)果
$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
| string|
第二次編譯并運(yùn)行后得到如下結(jié)果
$ tsc ./src/advanced_types_2.ts && node ./src/advanced_types_2.js
| string|
instanceof的右側(cè)要求是一個(gè)構(gòu)造函數(shù)溉跃，TypeScript將細(xì)化為：
- 此構(gòu)造函數(shù)的prototype屬性的類型村刨，如果它的類型不為any的話
- 構(gòu)造簽名所返回的類型的聯(lián)合
以此順序。
本實(shí)例結(jié)束實(shí)踐項(xiàng)目地址
https://github.com/durban89/typescript_demo.git
tag: 1.4.4
