1、 零基礎學透 ypeScr pt / 4 3 對 合并的愛與恨對 合并的愛與恨更新時間 2019 07 12 09:24:27理想的書籍是智慧的鑰匙。合并是指 TypeScr pt 編譯器會將名字相同的多個 合并為一個 ，合并后的 同時擁有多個 的特性。我們知道在 JavaScr p 中，使用var關鍵字定義變量時，定義相同名字的變量，后面的會覆蓋前面的值。使用et 定義變量和使用 const 定義常量時，不 名字重復。在 TypeScr pt 中，接 、命名空間是可以多次 的，最后TypeScr pt 會將多個同名 合并為一個。我們下來看個簡單的例子：interface nfo name s

2、tringinterface nfo age numberlet info nfoinfo = / error 類型“ name string ”中缺少屬性“age” name 'lison'info = / right name 'lison' age 18可以看到，我們定義了兩個同名接 Info，每個接 里都定義了一個必備屬性，最后定義nfo類型為Info時， nfo的定義要求同時包含name和age屬性。這就是 合并的簡單示例，接下來我們詳細學習。4.3.1. 補充知識TypeScr pt的所有 概括起來，會創(chuàng)建這三種實體之一：命名空間、類型和值：命名空間

3、的創(chuàng)建實際是創(chuàng)建一個對象，對象的屬性是在命名空間里export導出的內容；類型的 是創(chuàng)建一個類型并賦給一個名字；值的 就是創(chuàng)建一個在JavaScr pt中可以使用的值。下面這個表格會清晰的告訴你，每一種 類型會創(chuàng)建這三種實體中的哪種，先來說明一下，第一列是指 的內容，每一行包含4列，表明這一行中，第一列的 類型創(chuàng)建了后面三列哪種實體，打鉤即表示創(chuàng)建了該實體：類型創(chuàng)建了命名空間創(chuàng)建了類型創(chuàng)建了值NamespaceClassEnumnterfaceType Alias類型別名FunctionVariable可以看到，只 名空間創(chuàng)建了命名空間這種實體。C ass、Enum兩個，C ass即是實際的值

4、也作為類使用，Enum 編譯為JavaScr pt后也是實際值，而且我們講過，一定條件下，它的成員可以作為類型使用；Interface和類型別名 是純粹的類型；而Func ton和Var ab e只是創(chuàng)建了JavaScr pt中可用的值，不能作為類型使用，注意這里Var ab e是變量，不是常量，常量是可以作為類型使用的。4.3.2. 合并接口我們在本節(jié)課一開始的例子中，簡單示范了一下接 的合并，下面我們來補充一些內容。多個同名接 ，定義的非函數(shù)的成員命名應該是不重復的，如果重復了，類型應該是相同的，否則將會報錯。interface nfo name stringinterface nfo a

5、ge numberinterface nfo age boolean / error 后續(xù)屬性 必須屬于同 類型 屬性“age”的類型必須為“number”，但此處卻為類型“boolean”對于函數(shù)成員，每個同名函數(shù)成員都會被當成這個函數(shù)的重載，且合并時后面的接 具有更高的優(yōu)先級。來看下多個同名函數(shù)成員的例子：interface Res getRes(input string) numberinterface Res getRes(input number) stringconst res Res = getRes (input any) any => if (typeof input

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

7、命名空間，效果相當于：namespace Validation export const checkNumber = () => export const checkString = () => 在命名空間里，有時我們并不是把所有內容都對外部可見，對于沒有導出的內容，在其它同名命名空間內是無法訪問的：namespace Validation const numberReg = /0-9+$/export const stringReg = /A-Za-z+$/ export const checkString = () => namespace Validation expo

8、rt const checkNumber = (value any) => return numberReg test(value) / error 找不到名稱“numberReg”面定義的兩個命名空間，numberReg沒有使用export導出，所以在第二個同名命名空間內是無法使用的，如果給const numberReg 前面加 export，就可以在第二個命名空間使用了。4.3.4. 不同類型合并命名空間分別和類、函數(shù)、枚舉都可以合并，下面我們 說明：(1) 命名空間和類這里要求同名的類和命名空間在定義的時候，類的定義必須在命名空間前面，最后合并之后的效果，一個包含一些以命名空間導出

9、內容為靜態(tà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(Validation prototype) /

10、checkType fun () console log(Validation prototype constructor)/*checkNumber checkString numberReg stringReg*/(2) 命名空間和函數(shù)在JavaScr pt中，函數(shù)也是對象，所以可以給一個函數(shù)設置屬性，在TypeScr pt中，就可以通過 合并實現(xiàn)。但同樣要求，函數(shù)的定義要在同名命名空間前面，我們再拿之前講過的計數(shù)器的實現(xiàn)來看下，如何利用計數(shù)器的定義：function countUp () countUp count+namespace countUp export let count =

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