28 對(duì)聲明合并的愛(ài)與恨-慕課專欄_W

1、零基礎(chǔ)學(xué)透 TypeScript / 4-3 對(duì)聲明合并的愛(ài)與恨 對(duì)聲明合并的愛(ài)與恨更新時(shí)間：2019-07-12 09:24:27 理想的書(shū)籍是智慧的鑰匙。 列夫托爾斯泰 聲明合并是指 TypeScript 編譯器會(huì)將名字相同的多個(gè)聲明合并為一個(gè)聲明，合并后的聲明同時(shí)擁有多個(gè)聲明的特性。我們知道在 JavaScrip 中，使用var關(guān)鍵字定義變量時(shí)，定義相同名字的變量，后面的會(huì)覆蓋前面的值。使用let 定義變量和使用 const 定義常量時(shí)，不允許名字重復(fù)。在 TypeScript 中，接口、命名空間是可以多次聲明的，最后TypeScript 會(huì)將多個(gè)同名聲明合并為一個(gè)。我們下來(lái)看個(gè)簡(jiǎn)單的例

2、子： interface Info name: stringinterface Info age: numberlet info: Infoinfo = / error 類型“ name: string; ”中缺少屬性“age”name: lisoninfo = / right name: lison, age: 18可以看到，我們定義了兩個(gè)同名接口Info，每個(gè)接口里都定義了一個(gè)必備屬性，最后定義info類型為Info時(shí)，info的定義要求同時(shí)包含name和age屬性。這就是聲明合并的簡(jiǎn)單示例，接下來(lái)我們?cè)敿?xì)學(xué)習(xí)。 4.3.1. 補(bǔ)充知識(shí)TypeScript的所有聲明概括起來(lái)，會(huì)創(chuàng)建這三種實(shí)

3、體之一：命名空間、類型和值： 命名空間的創(chuàng)建實(shí)際是創(chuàng)建一個(gè)對(duì)象，對(duì)象的屬性是在命名空間里export導(dǎo)出的內(nèi)容； 類型的聲明是創(chuàng)建一個(gè)類型并賦給一個(gè)名字； 值的聲明就是創(chuàng)建一個(gè)在JavaScript中可以使用的值。 下面這個(gè)表格會(huì)清晰的告訴你，每一種聲明類型會(huì)創(chuàng)建這三種實(shí)體中的哪種，先來(lái)說(shuō)明一下，第一列是指聲明的內(nèi) 容，每一行包含4列，表明這一行中，第一列的聲明類型創(chuàng)建了后面三列哪種實(shí)體，打鉤即表示創(chuàng)建了該實(shí)體： 聲明類型 創(chuàng)建了命名空間 創(chuàng)建了類型 創(chuàng)建了值 NamespaceClassEnumInterfaceType Alias類型別名 FunctionVariable可以看到，只名空間

4、創(chuàng)建了命名空間這種實(shí)體。Class、Enum兩個(gè)，Class即是實(shí)際的值也作為類使用，Enum 編譯為JavaScript后也是實(shí)際值，而且我們講過(guò)，一定條件下，它的成員可以作為類型使用；Interface和類型別名是純粹的類型；而Funciton和Variable只是創(chuàng)建了JavaScript中可用的值，不能作為類型使用，注意這里Variable是 變量，不是常量，常量是可以作為類型使用的。 4.3.2. 合并接口我們?cè)诒竟?jié)課一開(kāi)始的例子中，簡(jiǎn)單示范了一下接口聲明的合并，下面我們來(lái)補(bǔ)充一些內(nèi)容。 多個(gè)同名接口，定義的非函數(shù)的成員命名應(yīng)該是不重復(fù)的，如果重復(fù)了，類型應(yīng)該是相同的，否則將會(huì)報(bào)錯(cuò)。

5、 interface Info name:stringinterface Info age: numberinterface Info age: boolean / error“age”“number”“boolean”對(duì)于函數(shù)成員，每個(gè)同名函數(shù)成員都會(huì)被當(dāng)成這個(gè)函數(shù)的重載，且合并時(shí)后面的接口具有更高的優(yōu)先級(jí)。來(lái)看下多 個(gè)同名函數(shù)成員的例子： interface Res getRes(input: string): numberinterface Res getRes(input: number): stringconst res: Res = getRes: (input: any): an

6、y = if (typeof input = string) return input.length else return String(input)res.getRes(123).length / error 類型“number”上不存在屬性“l(fā)ength”4.3.3. 合并命名空間同名命名空間最后會(huì)將多個(gè)命名空間導(dǎo)出的內(nèi)容進(jìn)行合并，如下面兩個(gè)命名空間： namespace Validation export const checkNumber = () = namespace Validation export const checkString = () = 上面定義兩個(gè)同名命名空間，

7、效果相當(dāng)于： namespace Validation export const checkNumber = () = export const checkString = () = 在命名空間里，有時(shí)我們并不是把所有內(nèi)容都對(duì)外部可見(jiàn)，對(duì)于沒(méi)有導(dǎo)出的內(nèi)容，在其它同名命名空間內(nèi)是無(wú)法訪 問(wèn)的： namespace Validation const numberReg = /0-9+$/ export const stringReg = /A-Za-z+$/ export const checkString = () = namespace Validation export const chec

8、kNumber = (value: any) = return numberReg.test(value) / error 找不到名稱“numberReg”上面定義的兩個(gè)命名空間，numberReg沒(méi)有使用export導(dǎo)出，所以在第二個(gè)同名命名空間內(nèi)是無(wú)法使用的，如果給 const numberReg 前面加上 export，就可以在第二個(gè)命名空間使用了。 4.3.4. 不同類型合并命名空間分別和類、函數(shù)、枚舉都可以合并，下面我們來(lái)一一說(shuō)明： (1) 命名空間和類這里要求同名的類和命名空間在定義的時(shí)候，類的定義必須在命名空間前面，最后合并之后的效果，一個(gè)包含一些 以命名空間導(dǎo)出內(nèi)容為靜態(tài)屬性的

9、類，來(lái)看例子： class Validation checkType() namespace Validation export const numberReg = /0-9+$/ export const stringReg = /A-Za-z+$/ export const checkString = () = namespace Validation export const checkNumber = (value: any) = return numberReg.test(value)console.log(Vtotype) / checkType: fun

10、 () console.log(Vtotype.constructor)/*checkNumber: . checkString: . numberReg: .stringReg: .*/ (2) 命名空間和函數(shù)在JavaScript中，函數(shù)也是對(duì)象，所以可以給一個(gè)函數(shù)設(shè)置屬性，在TypeScript中，就可以通過(guò)聲明合并實(shí)現(xiàn)。但 同樣要求，函數(shù)的定義要在同名命名空間前面，我們?cè)倌弥爸v過(guò)的計(jì)數(shù)器的實(shí)現(xiàn)來(lái)看下，如何利用聲明合并實(shí)現(xiàn) 計(jì)數(shù)器的定義： function countUp () countUp.count+namespace countUp export le

11、t count = 0countUp() countUp()console.log(countUp.count) / 2(3) 命名空間和枚舉可以通過(guò)命名空間和枚舉的合并，為枚舉拓展內(nèi)容，枚舉和同名命名空間的先后順序是沒(méi)有要求的，來(lái)看例子： enum Colors red, green, bluenamespace Colors export const yellow = 3console.log(Colors)/*0: red,1: green,2: blue,red: 0,green: 1,blue: 2,yellow: 3*/通過(guò)打印結(jié)果你可以發(fā)現(xiàn)，雖然我們使用命名空間增加了枚舉的成員，但是最后輸出的值只有key到index的映射， 沒(méi)有index到key的映射。 小結(jié)本小節(jié)我們學(xué)習(xí)了編譯器對(duì)于相同命名的聲明的合并策略，這個(gè)策略能夠幫我們實(shí)現(xiàn)一些類型定義的復(fù)用，比如多 個(gè)函數(shù)定義可合并為一個(gè)函數(shù)的重載，還可以利用聲明合并實(shí)現(xiàn)一些復(fù)雜的類型定義。但是有時(shí)我們會(huì)無(wú)意地定義 了一個(gè)之前定義過(guò)的名字，造成聲明合并了，再使用這個(gè)新定義的時(shí)候，發(fā)現(xiàn)應(yīng)用了一些這里未定義的類型校驗(yàn)， 所以我們?cè)诙x名字的時(shí)候要注意這一點(diǎn)。本小節(jié)我們講了接口、命名空間、不同類型是如何合并的，也學(xué)習(xí)了如 何利用聲明合并來(lái)定義復(fù)