相信現在很多小伙伴都在使用 TypeScript(以下簡稱 TS)，在 TS 中除了一些常用的基本類型外，還有一些稍微高級一點的類型，這些就是我本次文章要講的內容：索引類型與映射類型，希望小伙伴們看過這篇文章后能對 TS 有更深一步的理解。

索引類型

下面我通過一個官方的例子來說明下什么是索引類型：function pluck(o, names) { return names.map((n) => o[n])}這是個簡單的函數，names 是一個數組，里面是 key 值，我們可以從“o”里面取出這些 key 值，理想情況下 names 里面的 key 應該都是“o”里面包含的，否則最終的結果里面就會有 undefined，這個函數返回的結果也應該是“o”中都包含的 value 值，那么我們如何才能做到這些類型約束呢，如果只用一些基礎類型，很難達到滿意的效果，下面使用索引類型改寫下：function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] { return names.map((n) => o[n])}interface Person { name: string age: number}let person: Person = { name: 'Jarid', age: 35}let strings: string[] = pluck(person, ['name']) // ok, string[]改寫后這個函數是一個泛型函數，泛型為 T 和 K，其中 K 有點特殊，K extends keyof T，是什么意思呢，其中 keyof 就是索引類型查詢操作符，我們從字面意思理解，它就是 T 的 key，就是 T 上已知的公共屬性名的聯合，對于上面的代碼，keyof Person就是'name'|'age',那么K extends keyof T就是K extends 'name'|'age'，這樣我們就獲取到了 Person 上所有 key 組成的一個聯合類型，然后參數o: T, names: K[]，就很好理解了，names 就是 K 組成的一個數組。返回值中T[K][]我們需要拆開來看 T[K]和[]，就是 T[K]組成的一個數組，那么 T[K]是什么類型呢，它就是索引訪問操作符，類似于 js 中對象的取值操作，不過這里取的是類型，因為 K 是'name'|'age',所以 T[K]就是string|number，這些就是索引類型，其實也不難理解，下面再說下映射類型，它和索引類型結合起來可以做很多事情。

映射類型

映射類型也很容易理解，我們先看一個簡單的例子type Keys = 'option1' | 'option2'type Flags = { [K in Keys]: boolean }這個就是一個簡單的映射類型，其中的in可以理解為是我們平時用的for...in，就是去遍歷 Keys，然后把 boolean 賦給每一個 key，上面的 Flags 得到的結果就是type Flags = { option1: boolean option2: boolean}很簡單吧，那么這個東西有什么用處呢，請看下面的例子：// Persontype Person { name: string age: number}我們想把這個 Person 里面的屬性都變成只讀的，像這樣：// Readonly Persontype Person { readonly name: string readonly age: number}如果我們有很多這樣的類型，那么改起來會很麻煩，因為每次都要把這個類型重新寫一遍。其實我們可以使用剛才的索引類型和映射類型來寫一個泛型：type Readonly = { readonly [P in keyof T]: T[P]}[P in keyof T]就是遍歷 T 中的 key，T[P]就是當前的 key 的類型，其實[P in keyof T]: T[P]就是把 T 遍歷了一遍，但是我們在屬性前面加了個 readonly，這樣我們調用這個泛型的時候，它就會把傳入的類型的 key 遍歷一遍，遍歷的同時在前面加個 readonly，最終給我們返回一個新的類型。我們在調用的時候只需要這么用：type Readonly = { readonly [P in keyof T]: T[P]}type Person { name: string age: number}type ReadonlyPerson = Readonly索引類型和映射類型除了能實現 Readonly，還能實現很多有意思的東西，我們平時在使用 TS 的時候，TS 已經內置了一些常用的輔助泛型，剛才的 Readonly 就是其一，另外還有很多，我從 TS 的類型定義文件里找了一些，這些泛型從簡單到復雜的都有，但基本上都是用上面提到的兩個類型實現的，下面我們一起來分析一下。

TS 常用的輔助泛型及其實現方式

首先來看第一個/** * Make all properties in T optional */type Partial = { [P in keyof T]?: T[P]}相信這個泛型很多人都用過，就是把類型都變成可選的，和剛才的 Readonly 是類似的實現方式，只是這個是在后面加了個問號，這樣一來屬性就變成可選的了。
與之相對的還有一個 Required/** * Make all properties in T required */type Required = { [P in keyof T]-?: T[P]}注意這個稍有點不同，它是-?,其實就是減去問號，這樣就可以把問號去掉，從而變成必選的屬性。再來看下一個。/** * From T, pick a set of properties whose keys are in the union K */type Pickextends keyof T> = { [P in K]: T[P]}如果你理解了最開始的那個 pluck 函數，這個就很好理解了，我們傳入 T 和 K，其中 K 是 T 的 keys 組成的聯合類型，再看返回值[P in K]: T[P]，就是把 K 遍歷了一遍，同時賦值上原類型，那么綜合來看 Pick 就是幫我們提取出某些類型的，比如通過Pick我們就可以得到{name: string}，再來看下一個/** * Exclude from T those types that are assignable to U */type Exclude = T extends U ? never : T這個泛型傳入一個 T 和 U，然后它判斷了 T 是否屬于 U，屬于的話返回 never 否則返回原類型 T，注意 never 在最終的類型中是不會存在的，所以它可以幫助我們消除某些屬性，其實這個 Exclude 就是消除了T extends U的類型，比如我們使用Exclude，最終會得到'a'，與之相反的有：/** * Extract from T those types that are assignable to U */type Extract = T extends U ? T : never這個正好相反，是從 T 中取出 U 中擁有的類型。有了 Exclude，我們就可以和 Pick 結合來實現另外一個：/** * construct a type with the properties of T except for those in type K. */type Omitextends keyof any> = Pick>這個泛型是先使用了Exclude，去除了 keyof T 中的 K，然后又使用 Pick 取出了這些類型，這樣我們就可以從 T 中去除 K 里面包含的 keys 了，達到和 Pick 相反的效果。我們再來看另一個稍微復雜一點的type NonNullObject = Pick< O, { [K in keyof O]: O[K] extends null | undefined ? never : K }[keyof O]>這個不是 TS 內置的類型，但也是一個很有用的類型，我們來一點一點分析。首先這個泛型使用了 Pick，我們知道 Pick 就是取出一些屬性，我們先看傳給 Pick 的第二個參數{ [K in keyof O]: O[K] extends null | undefined ? never : K}[keyof O]它遍歷了 O 的 keys，然后進行了一個判斷，如果是extends null | undefined則返回 never，否則返回 K，K 就是 O 中的 key 值，注意這里和之前的一些泛型有些不一樣,之前的都是O[K]，而這里的屬性的值還是 K，最終我們得到的是類似K:K這樣的東西，比如{name: string, age: null}這個，經過上面的轉化會變成{name:'name', age:never}，可能有些小伙伴還不清楚為什么要這樣轉換，我們接著往下分析，經過這個轉換之后，又進行了一個操作[keyof O]，對于 Person，keyof O 就是'name'|'age'，那么這里就就是{name:'name', age:never}['name'|'age']，這樣就很清晰了，其實就是一個取值操作，這樣我們就可以得到'name'|never，還記得 never 的特性嗎，它可以幫我們消除一些類型，那么最終的就是'name'，這也是為什么我們寫成類似 K:K 這樣，就是要把 null|undefined 對應的 key 轉換成 never，然后再通過 keyof 把他們全都取出來，別忘了最外面還有一個 Pick，這樣我們就從原始類型中去除了 null|undefined。另外還有一個比較有用的是 ReturnType/**
* Obtain the return type of a function type
*/
type ReturnType any> = T extends (
...args: any
) => infer R
? R
: any它可以幫我們取到函數返回值的類型，這個 ReturnType 接收的一個參數是函數，然后進行了一個判斷T extends (...args: any) => infer R，就是判斷是否是函數，這里有個東西是 infer，通過這個操作符我們可以獲取 R 的引用，就是函數的返回值，最終再把 R 返回出去，就獲得了函數 T 的返回值。其實除了我分析的這些泛型，TS 還內置了其他的很多泛型，比如還有獲取函數的參數的，獲取構造函數類型的，總的來說各種泛型基本上都可以用索引類型和映射類型實現。希望大家看過這篇文章后能多多使用這兩種類型，在自己的項目里也能開發一些常用的輔助泛型，來提升工作效率。本文完~

總結

以上是生活随笔為你收集整理的typescript索引类型_TypeScript的索引类型与映射类型，以及常用工具泛型的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。