(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）
? ? ? ? ??
?
目錄
索引簽名類型?
映射類型
索引查詢（訪問）類型
基本使用?
同時查詢多個索引的類型?
TypeScript 類型聲明文件?
概述
TS 的兩種文件類型?
類型聲明文件的使用說明
使用已有的類型聲明文件?
內(nèi)置類型聲明文件
第三方庫的類型聲明文件
創(chuàng)建自己的類型聲明文件
項(xiàng)目內(nèi)共享類型
為已有 JS 文件提供類型聲明。
索引簽名類型?
絕大多數(shù)情況下，我們都可以在使用對象前就確定對象的結(jié)構(gòu)，并為對象添加準(zhǔn)確的類型。使用場景： 當(dāng)無法確定對象中有哪些屬性 （或者說對象中可以出現(xiàn)任意多個屬性），此時， 就用到索引簽名類型了 。
解釋：1. 使用 [key: string] 來約束該接口中允許出現(xiàn)的屬性名稱。表示只要是 string 類型的屬性名稱，都可以出現(xiàn)在對象中。2. 這樣，對象 obj 中就可以出現(xiàn)任意多個屬性（比如，a、b 等）。3. key 只是一個占位符 ，可以換成任意合法的變量名稱。4. 隱藏的前置知識： JS 中對象（{}）的鍵是 string 類型的 。
在 JS 中數(shù)組是一類特殊的對象，特殊在 數(shù)組的鍵（索引）是數(shù)值類型 。并且，數(shù)組也可以出現(xiàn)任意多個元素。所以，在數(shù)組對應(yīng)的泛型接口中，也用到了索引簽名類型
解釋：1. MyArray 接口模擬原生的數(shù)組接口，并使用 [n: number] 來作為索引簽名類型。2. 該索引簽名類型表示：只要是 number 類型的鍵（索引）都可以出現(xiàn)在數(shù)組中，或者說數(shù)組中可以有任意多個元素。3. 同時也符合數(shù)組索引是 number 類型這一前提。
映射類型
映射類型 ： 基于舊類型創(chuàng)建新類型（對象類型） ，減少重復(fù)、提升開發(fā)效率。比如，類型 PropKeys 有 x/y/z，另一個類型 Type1 中也有 x/y/z，并且 Type1 中 x/y/z 的類型相同：
這樣書寫沒錯，但 x/y/z 重復(fù)書寫了兩次。像這種情況，就可以使用映射類型來進(jìn)行簡化。
解釋：1. 映射類型是基于索引簽名類型的，所以，該語法類似于索引簽名類型，也使用了 [] 。2. Key in PropKeys 表示 Key 可以是 PropKeys 聯(lián)合類型中的任意一個，類似于 forin(let k in obj)。3. 使用映射類型創(chuàng)建的新對象類型 Type2 和類型 Type1 結(jié)構(gòu)完全相同。4. 注意： 映射類型只能在類型別名中使用 ， 不能在接口中使用
映射類型除了根據(jù)聯(lián)合類型創(chuàng)建新類型外，還可以根據(jù)對象類型來創(chuàng)建：
解釋：1. 首先，先執(zhí)行 keyof Props 獲取到對象類型 Props 中所有鍵的聯(lián)合類型即，'a' | 'b' | 'c'。2. 然后， Key in ... 就表示 Key 可以是 Props 中所有的鍵名稱中的任意一個。
實(shí)際上，前面講到的 泛型工具類型 （比如，Partial<Type>）都 是基于映射類型實(shí)現(xiàn)的 。比如，Partial<Type> 的實(shí)現(xiàn)：
解釋：1. keyof T 即 keyof Props 表示獲取 Props 的所有鍵，也就是：'a' | 'b' | 'c'。2. 在 [] 后面添加 ? （問號），表示將這些屬性變?yōu)?/span> 可選 的，以此來實(shí)現(xiàn) Partial 的功能。3. 冒號后面的 T[P] 表示獲取 T 中每個鍵對應(yīng)的類型 。比如，如果是 'a' 則類型是 number；如果是 'b' 則類型是 string。4. 最終，新類型 PartialProps 和舊類型 Props 結(jié)構(gòu)完全相同，只是讓所有類型都變?yōu)榭蛇x了
索引查詢（訪問）類型
基本使用?
剛剛用到的 T[P] 語法，在 TS 中叫做 索引查詢（訪問）類型 。作用： 用來查詢屬性的類型 。
解釋： Props['a'] 表示查詢類型 Props 中屬性 'a' 對應(yīng)的類型 number。所以，TypeA 的類型為 number。注意： [] 中的屬性必須存在于被查詢類型中 ，否則就會報錯。
同時查詢多個索引的類型?
索引查詢類型的其他使用方式：同時查詢多個索引的類型
文章來源：http://www.zghlxwxcb.cn/news/detail-715281.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-715281.html
解釋：使用字符串字面量的聯(lián)合類型，獲取屬性 a 和 b 對應(yīng)的類型，結(jié)果為： string | number。
解釋：使用 keyof 操作符獲取 Props 中所有鍵對應(yīng)的類型，結(jié)果為： string | number | boolean。
TypeScript 類型聲明文件?
概述
今天幾乎所有的 JavaScript 應(yīng)用都會引入許多第三方庫來完成任務(wù)需求。這些第三方庫不管是否是用 TS 編寫的，最終都要編譯成 JS 代碼，才能發(fā)布給開發(fā)者使用。我們知道是 TS 提供了類型，才有了代碼提示和類型保護(hù)等機(jī)制。但在項(xiàng)目開發(fā)中使用第三方庫時，你會發(fā)現(xiàn)它們幾乎都有相應(yīng)的 TS 類型，這些類型是怎么來的呢？ 類型聲明文件類型聲明文件 ： 用來為已存在的 JS 庫提供類型信息 。這樣在 TS 項(xiàng)目中使用這些庫時，就像用 TS 一樣，都會有代碼提示、類型保護(hù)等機(jī)制了。1. TS 的兩種文件類型2. 類型聲明文件的使用說明
TS 的兩種文件類型?
TS 中有兩種文件類型：1 .ts 文件 2 .d.ts 文件 。.ts 文件：1. 既包含類型信息又可執(zhí)行代碼 。2. 可以被編譯為 .js 文件，然后，執(zhí)行代碼。3. 用途：編寫程序代碼的地方。.d.ts 文件：1. 只包含類型信息 的類型聲明文件。2. 不會生成 .js 文件 ，僅用于 提供類型信息 。3. 用途：為 JS 提供類型信息總結(jié)：.ts 是 implementation（代碼實(shí)現(xiàn)文件）；.d.ts 是 declaration（類型聲明文件） 。如果要為 JS 庫提供類型信息，要使用 .d.ts 文件。
類型聲明文件的使用說明
在使用 TS 開發(fā)項(xiàng)目時， 類型聲明文件的使用 包括以下兩種方式：1. 使用已有的類型聲明文件2. 創(chuàng)建自己的類型聲明文件學(xué)習(xí)順序： 先會用 （別人的） 再會寫 （自己的）
使用已有的類型聲明文件?
內(nèi)置類型聲明文件
內(nèi)置類型聲明文件： TS 為 JS 運(yùn)行時可用的所有標(biāo)準(zhǔn)化內(nèi)置 API 都提供了聲明文件 。比如，在使用數(shù)組時，數(shù)組所有方法都會有相應(yīng)的代碼提示以及類型信息：
實(shí)際上這都是 TS 提供的內(nèi)置類型聲明文件。可以通過 Ctrl + 鼠標(biāo)左鍵（Mac：option + 鼠標(biāo)左鍵）來查看內(nèi)置類型聲明文件內(nèi)容。比如，查看 forEach 方法的類型聲明，在 VSCode 中會自動跳轉(zhuǎn)到 lib.es5 .d.ts 類型聲明文件中。當(dāng)然，像 window、document 等 BOM、DOM API 也都有相應(yīng)的類型聲明（lib.dom .d.ts ）。
第三方庫的類型聲明文件
第三方庫的類型聲明文件 ：目前，幾乎所有常用的第三方庫都有相應(yīng)的類型聲明文件。第三方庫的類型聲明文件有兩種存在形式：1 庫自帶類型聲明文件 2 由 DefinitelyTyped 提供 。1. 庫自帶類型聲明文件：比如，axios。
解釋：這種情況下，正常導(dǎo)入該庫， TS 就會自動加載庫自己的類型聲明文件 ，以提供該庫的類型聲明。
2. 由 DefinitelyTyped 提供 。DefinitelyTyped 是一個 github 倉庫， 用來提供高質(zhì)量 TypeScript 類型聲明 。可以通過 npm/yarn 來下載該倉庫提供的 TS 類型聲明包，這些包的名稱格式為： @types/* 。比如，@types/react、@types/lodash 等。說明：在實(shí)際項(xiàng)目開發(fā)時，如果你使用的第三方庫沒有自帶的聲明文件，VSCode 會給出明確的提示。
解釋：當(dāng)安裝 @types/* 類型聲明包后， TS 也會自動加載該類聲明包 ，以提供該庫的類型聲明。補(bǔ)充：TS 官方文檔提供了一個 頁面 ，可以來查詢 @types/* 庫。
創(chuàng)建自己的類型聲明文件
項(xiàng)目內(nèi)共享類型
1. 項(xiàng)目內(nèi)共享類型：如果 多個 .ts 文件 中都用到同一個類型，此時可以創(chuàng)建 .d.ts 文件提供該類型， 實(shí)現(xiàn)類型共享 。操作步驟：1. 創(chuàng)建 index .d.ts 類型聲明文件。2. 創(chuàng)建需要共享的類型，并 使用 export 導(dǎo)出 （TS 中的類型也可以使用 import/export 實(shí)現(xiàn)模塊化功能）。3. 在需要使用共享類型的 .ts 文件中，通過 import 導(dǎo)入即可（.d.ts 后綴導(dǎo)入時，直接省略）。
為已有 JS 文件提供類型聲明。
2. 為已有 JS 文件提供類型聲明 ：????????1. 在 將 JS 項(xiàng)目 遷移 到 TS 項(xiàng)目 時，為了讓已有的 .js 文件有類型聲明。????????2. 成為庫作者，創(chuàng)建庫給其他人使用。注意： 類型聲明文件的編寫與模塊化方式相關(guān) ，不同的模塊化方式有不同的寫法。但由于歷史原因，JS 模塊化的發(fā)展經(jīng)歷過多種變化（AMD、CommonJS、UMD、ESModule 等），而 TS 支持各種模塊化形式的類型聲明。這就導(dǎo)致類型聲明文件 相關(guān)內(nèi)容 又多又雜。演示：基于 最新的 ESModule （import/export）來為已有 .js 文件，創(chuàng)建類型聲明文件。開發(fā)環(huán)境準(zhǔn)備：使用 webpack 搭建，通過 ts-loader 處理 .ts 文件。
說明：TS 項(xiàng)目中也可以使用 .js 文件。說明：在導(dǎo)入 .js 文件時， TS 會自動加載與 .js 同名的 .d.ts 文件 ，以提供類型聲明。declare 關(guān)鍵字： 用于類型聲明，為其他地方 （比如，.js 文件） 已存在的變量聲明類型，而不是創(chuàng)建一個新的變量 。1. 對于 type、interface 等這些明確就是 TS 類型的（只能在 TS 中使用的），可以省略 declare 關(guān)鍵字。2. 對于 let、function 等具有雙重含義（在 JS、TS 中都能用），應(yīng)該使用 declare 關(guān)鍵字，明確指定此處用于類型聲明。
到了這里，關(guān)于前端TypeScript學(xué)習(xí)day05-索引簽名、映射與類型聲明文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
