深入理解TypeScript 類(lèi)型兼容性
我們學(xué)習(xí)類(lèi)型兼容性，就是在學(xué)習(xí) TypeScript 在一個(gè)類(lèi)型能否賦值給其他類(lèi)型的規(guī)則。本節(jié)將會(huì)詳細(xì)介紹 TypeScript 在函數(shù)、枚舉、類(lèi)和泛型中的類(lèi)型兼容性規(guī)則。
1. 解釋
類(lèi)型兼容性用于確定一個(gè)類(lèi)型是否能賦值給其他類(lèi)型。
TypeScript 的類(lèi)型檢查機(jī)制都是為了讓開(kāi)發(fā)者在編譯階段就可以直觀的發(fā)現(xiàn)代碼書(shū)寫(xiě)問(wèn)題，養(yǎng)成良好的代碼規(guī)范從而避免很多低級(jí)錯(cuò)誤。
let address: string = 'Baker Street 221B' let year: number = 2010 address = year // Error
代碼解釋?zhuān)?/strong> 第 3 行，類(lèi)型 ‘number’ 不能賦值給類(lèi)型 ‘string’。
2. 結(jié)構(gòu)化
TypeScript 類(lèi)型兼容性是基于結(jié)構(gòu)類(lèi)型的；結(jié)構(gòu)類(lèi)型只使用其成員來(lái)描述類(lèi)型。
TypeScript 結(jié)構(gòu)化類(lèi)型系統(tǒng)的基本規(guī)則是，如果 x 要兼容 y，那么 y 至少具有與 x 相同的屬性。比如：
interface User {
name: string,
year: number
}
let protagonist = {
name: 'Sherlock·Holmes',
year: 1854,
address: 'Baker Street 221B'
}
let user: User = protagonist // OK
代碼解釋?zhuān)?/strong> 接口 User 中的每一個(gè)屬性在 protagonist 對(duì)象中都能找到對(duì)應(yīng)的屬性，且類(lèi)型匹配。另外，可以看到 protagonist 具有一個(gè)額外的屬性 address，但是賦值同樣會(huì)成功。
3. 比較兩個(gè)函數(shù)
相對(duì)來(lái)講，在比較原始類(lèi)型和對(duì)象類(lèi)型的時(shí)候是比較容易理解的，難的是如何判斷兩個(gè)函數(shù)是否兼容。判斷兩個(gè)函數(shù)是否兼容，首先要看參數(shù)是否兼容，第二個(gè)還要看返回值是否兼容。
3.1 函數(shù)參數(shù)
先看一段代碼示例：
let fn1 = (a: number, b: string) => {}
let fn2 = (c: number, d: string, e: boolean) => {}
fn2 = fn1 // OK
fn1 = fn2 // Error
代碼解釋?zhuān)?/strong>
第 4 行，將 fn1 賦值給 fn2 成立是因?yàn)椋?/p>
- fn1 的每個(gè)參數(shù)均能在 fn2 中找到對(duì)應(yīng)類(lèi)型的參數(shù)
- 參數(shù)順序保持一致，參數(shù)類(lèi)型對(duì)應(yīng)
- 參數(shù)名稱(chēng)不需要相同
第 5 行，將 fn2 賦值給 fn1 不成立，是因?yàn)?fn2 中的必須參數(shù)必須在 fn1 中找到對(duì)應(yīng)的參數(shù)，顯然第三個(gè)布爾類(lèi)型的參數(shù)在 fn1 中未找到。
參數(shù)類(lèi)型對(duì)應(yīng)即可，不需要完全相同：
let fn1 = (a: number | string, b: string) => {}
let fn2 = (c: number, d: string, e: boolean) => {}
fn2 = fn1 // OK
代碼解釋?zhuān)?/strong> fn1 的第一個(gè)參數(shù)是 number 和 string 的聯(lián)合類(lèi)型，可以對(duì)應(yīng) fn2 的第一個(gè)參數(shù)類(lèi)型 number，所以第 4 行賦值正常。
3.2 函數(shù)返回值
創(chuàng)建兩個(gè)僅是返回值類(lèi)型不同的函數(shù)
代碼解釋?zhuān)?/strong> 最后一行，函數(shù) x() 缺少 location 屬性，所以報(bào)錯(cuò)。
類(lèi)型系統(tǒng)強(qiáng)制源函數(shù)的返回值類(lèi)型必須是目標(biāo)函數(shù)返回值類(lèi)型的子類(lèi)型。由此可以得出如果目標(biāo)函數(shù)的返回值類(lèi)型是 void，那么源函數(shù)返回值可以是任意類(lèi)型：
let x : () => void let y = () => 'mybj' x = y // OK
4. 枚舉的類(lèi)型兼容性
枚舉與數(shù)字類(lèi)型相互兼容:
enum Status {
Pending,
Resolved,
Rejected
}
let current = Status.Pending
let num = 0
current = num
num = current
不同枚舉類(lèi)型之間是不兼容的：
enum Status { Pending, Resolved, Rejected }
enum Color { Red, Blue, Green }
let current = Status.Pending
current = Color.Red // Error
5. 類(lèi)的類(lèi)型兼容性
類(lèi)與對(duì)象字面量和接口的兼容性非常類(lèi)似，但是類(lèi)分實(shí)例部分和靜態(tài)部分。
比較兩個(gè)類(lèi)類(lèi)型數(shù)據(jù)時(shí)，只有實(shí)例成員會(huì)被比較，靜態(tài)成員和構(gòu)造函數(shù)不會(huì)比較。
class Animal {
feet!: number
constructor(name: string, numFeet: number) { }
}
class Size {
feet!: number
constructor(numFeet: number) { }
}
let a: Animal
let s: Size
a = s! // OK
s = a // OK
代碼解釋?zhuān)?/strong> 類(lèi) Animal 和類(lèi) Size 有相同的實(shí)例成員 feat 屬性，且類(lèi)型相同，構(gòu)造函數(shù)參數(shù)雖然不同，但構(gòu)造函數(shù)不參與兩個(gè)類(lèi)類(lèi)型比較，所以最后兩行可以相互賦值。
類(lèi)的私有成員和受保護(hù)成員會(huì)影響兼容性。 允許子類(lèi)賦值給父類(lèi)，但是不能賦值給其它有同樣類(lèi)型的類(lèi)。
class Animal {
protected feet!: number
constructor(name: string, numFeet: number) { }
}
class Dog extends Animal {}
let a: Animal
let d: Dog
a = d! // OK
d = a // OK
class Size {
feet!: number
constructor(numFeet: number) { }
}
let s: Size
a = s! // Error
代碼解釋?zhuān)?/strong>
第 13 行，子類(lèi)可以賦值給父類(lèi)。
第 14 行，父類(lèi)之所以能夠給賦值給子類(lèi)，是因?yàn)樽宇?lèi)中沒(méi)有成員。
最后一行，因?yàn)轭?lèi) Animal 中的成員 feet 是受保護(hù)的，所以不能賦值成功。
6. 泛型的類(lèi)型兼容性
泛型的類(lèi)型兼容性根據(jù)其是否被成員使用而不同。先看一段代碼示例：
interface Empty<T> {}
let x: Empty<number>
let y: Empty<string>
x = y! // OK
上面代碼里，x 和 y 是兼容的，因?yàn)樗鼈兊慕Y(jié)構(gòu)使用類(lèi)型參數(shù)時(shí)并沒(méi)有什么不同。但是當(dāng)泛型被成員使用時(shí)：
interface NotEmpty<T> {
data: T
}
let x: NotEmpty<number>
let y: NotEmpty<string>
x = y! // Error
代碼解釋?zhuān)?/strong> 因?yàn)榈?4 行，泛型參數(shù)是 number 類(lèi)型，第 5 行，泛型參數(shù)是 string 類(lèi)型，所以最后一行賦值失敗。
如果沒(méi)有指定泛型類(lèi)型的泛型參數(shù)，會(huì)把所有泛型參數(shù)當(dāng)成 any 類(lèi)型比較
7. 小結(jié)
要充分利用 TypeScript 的類(lèi)型檢查機(jī)制規(guī)范代碼，減少一些不必要的錯(cuò)誤，這也是我們使用 TypeScript 的初衷。
到此這篇關(guān)于深入理解TypeScript 類(lèi)型兼容性的文章就介紹到這了,更多相關(guān)TypeScript類(lèi)型兼容性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了在JavaScript中分解數(shù)字的三種方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
ES6和CommonJS都有自己的一套處理模塊化代碼的措施，這篇文章主要介紹了ES6與CommonJS中的模塊處理的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了JavaScript異步加載淺析,本文講解了腳本延遲執(zhí)行、腳本的完全并行化、可編程的腳本加載等內(nèi)容,需要的朋友可以參考下2014-12-12
renderjs是一個(gè)運(yùn)行在視圖層的js,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關(guān)于uni-app中renderjs使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
微信小程序自定義彈出模態(tài)框禁止底部滾動(dòng)功能
這篇文章主要介紹了微信小程序自定義彈出模態(tài)框禁止底部滾動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了javaScript如何使用EL表達(dá)式，有哪幾種不錯(cuò)的方式,需要的朋友可以參考下2014-05-05
js函數(shù)的引用， 關(guān)于內(nèi)存的開(kāi)銷(xiāo)
函數(shù)的引用， 對(duì)于內(nèi)存的開(kāi)銷(xiāo)分析，需要的朋友可以參考下2012-09-09
這篇文章主要介紹了uniapp小程序使用RSA加密解密,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了js使用cookie記錄用戶(hù)名的方法,通過(guò)完整實(shí)例形式分析了JavaScript針對(duì)cookie的創(chuàng)建、賦值及刪除等操作技巧,以及通過(guò)cookie記錄用戶(hù)登錄信息的方法,需要的朋友可以參考下2015-11-11
javascript實(shí)現(xiàn)圖片輪播簡(jiǎn)單效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)圖片輪播簡(jiǎn)單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07