相信現(xiàn)在很多小伙伴都在使用 TypeScript（以下簡稱 TS）轴术，在 TS 中除了一些常用的基本類型外劫流，還有一些稍微高級一點的類型巫玻，這些就是我本次文章要講的內(nèi)容：索引類型與映射類型，希望小伙伴們看過這篇文章后能對 TS 有更深一步的理解困介。
索引類型
下面我通過一個官方的例子來說明下什么是索引類型：
function pluck(o, names) {
return names.map((n) => o[n])
}
這是個簡單的函數(shù)大审，names 是一個數(shù)組，里面是 key 值座哩，我們可以從“o”里面取出這些 key 值徒扶，理想情況下 names 里面的 key 應(yīng)該都是“o”里面包含的，否則最終的結(jié)果里面就會有 undefined根穷，這個函數(shù)返回的結(jié)果也應(yīng)該是“o”中都包含的 value 值姜骡，那么我們?nèi)绾尾拍茏龅竭@些類型約束呢，如果只用一些基礎(chǔ)類型屿良，很難達(dá)到滿意的效果圈澈，下面使用索引類型改寫下：
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[]
改寫后這個函數(shù)是一個泛型函數(shù)，泛型為 T 和 K尘惧，其中 K 有點特殊康栈，K extends keyof T，是什么意思呢喷橙，其中 keyof 就是索引類型查詢操作符啥么，我們從字面意思理解，它就是 T 的 key贰逾，就是 T 上已知的公共屬性名的聯(lián)合悬荣，對于上面的代碼，keyof Person就是'name'|'age',那么K extends keyof T就是K extends 'name'|'age'疙剑，這樣我們就獲取到了 Person 上所有 key 組成的一個聯(lián)合類型氯迂，然后參數(shù)o: T, names: K[]，就很好理解了言缤，names 就是 K 組成的一個數(shù)組嚼蚀。返回值中T[K][]我們需要拆開來看 T[K]和[]，就是 T[K]組成的一個數(shù)組轧简，那么 T[K]是什么類型呢驰坊，它就是索引訪問操作符，類似于 js 中對象的取值操作哮独，不過這里取的是類型拳芙，因為 K 是'name'|'age',所以 T[K]就是string|number，這些就是索引類型皮璧，其實也不難理解舟扎，下面再說下映射類型，它和索引類型結(jié)合起來可以做很多事情悴务。
映射類型
映射類型也很容易理解睹限，我們先看一個簡單的例子
type Keys = 'option1' | 'option2'
type Flags = { [K in Keys]: boolean }
這個就是一個簡單的映射類型，其中的in可以理解為是我們平時用的for...in讯檐，就是去遍歷 Keys羡疗，然后把 boolean 賦給每一個 key，上面的 Flags 得到的結(jié)果就是
type Flags = {
option1: boolean
option2: boolean
}
很簡單吧别洪，那么這個東西有什么用處呢叨恨，請看下面的例子：
// Person
type Person {
name: string
age: number
}
我們想把這個 Person 里面的屬性都變成只讀的，像這樣：
// Readonly Person
type Person {
readonly name: string
readonly age: number
}
如果我們有很多這樣的類型挖垛，那么改起來會很麻煩痒钝，因為每次都要把這個類型重新寫一遍。其實我們可以使用剛才的索引類型和映射類型來寫一個泛型：
type Readonly<T> = {
readonly [P in keyof T]: T[P]
}
[P in keyof T]就是遍歷 T 中的 key痢毒，T[P]就是當(dāng)前的 key 的類型送矩，其實[P in keyof T]: T[P]就是把 T 遍歷了一遍，但是我們在屬性前面加了個 readonly哪替，這樣我們調(diào)用這個泛型的時候栋荸，它就會把傳入的類型的 key 遍歷一遍，遍歷的同時在前面加個 readonly凭舶，最終給我們返回一個新的類型晌块。我們在調(diào)用的時候只需要這么用：
type Readonly<T> = {
readonly [P in keyof T]: T[P]
}
type Person {
name: string
age: number
}
type ReadonlyPerson = Readonly<Person>
索引類型和映射類型除了能實現(xiàn) Readonly，還能實現(xiàn)很多有意思的東西库快，我們平時在使用 TS 的時候摸袁，TS 已經(jīng)內(nèi)置了一些常用的輔助泛型，剛才的 Readonly 就是其一义屏，另外還有很多靠汁，我從 TS 的類型定義文件里找了一些，這些泛型從簡單到復(fù)雜的都有闽铐，但基本上都是用上面提到的兩個類型實現(xiàn)的蝶怔，下面我們一起來分析一下。
TS 常用的輔助泛型及其實現(xiàn)方式
首先來看第一個
/**
* Make all properties in T optional
*/
type Partial<T> = {
[P in keyof T]?: T[P]
}
相信這個泛型很多人都用過兄墅，就是把類型都變成可選的踢星，和剛才的 Readonly 是類似的實現(xiàn)方式，只是這個是在后面加了個問號隙咸，這樣一來屬性就變成可選的了沐悦。
與之相對的還有一個 Required
/**
* Make all properties in T required
*/
type Required<T> = {
[P in keyof T]-?: T[P]
}
注意這個稍有點不同成洗，它是-?,其實就是減去問號，這樣就可以把問號去掉藏否，從而變成必選的屬性瓶殃。再來看下一個
/**
* From T, pick a set of properties whose keys are in the union K
*/
type Pick<T, K extends keyof T> = {
[P in K]: T[P]
}
如果你理解了最開始的那個 pluck 函數(shù)，這個就很好理解了副签，我們傳入 T 和 K遥椿，其中 K 是 T 的 keys 組成的聯(lián)合類型，再看返回值[P in K]: T[P]淆储，就是把 K 遍歷了一遍冠场，同時賦值上原類型，那么綜合來看 Pick 就是幫我們提取出某些類型的本砰，比如通過Pick<Person, 'name'>我們就可以得到{name: string}碴裙，再來看下一個
/**
* Exclude from T those types that are assignable to U
*/
type Exclude<T, U> = T extends U ? never : T
這個泛型傳入一個 T 和 U，然后它判斷了 T 是否屬于 U灌具，屬于的話返回 never 否則返回原類型 T青团，注意 never 在最終的類型中是不會存在的，所以它可以幫助我們消除某些屬性咖楣，其實這個 Exclude 就是消除了T extends U的類型督笆，比如我們使用Exclude<'a'|'b','b'|'c'>，最終會得到'a'诱贿，與之相反的有：
/**
* Extract from T those types that are assignable to U
*/
type Extract<T, U> = T extends U ? T : never
這個正好相反娃肿，是從 T 中取出 U 中擁有的類型。
有了 Exclude珠十，我們就可以和 Pick 結(jié)合來實現(xiàn)另外一個：
/**
* Construct a type with the properties of T except for those in type K.
*/
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>
這個泛型是先使用了Exclude<keyof T, K>料扰，去除了 keyof T 中的 K，然后又使用 Pick 取出了這些類型焙蹭，這樣我們就可以從 T 中去除 K 里面包含的 keys 了晒杈，達(dá)到和 Pick 相反的效果。
我們再來看另一個稍微復(fù)雜一點的
type NonNullObject<O> = Pick<
O,
{
[K in keyof O]: O[K] extends null | undefined ? never : K
}[keyof O]
>
這個不是 TS 內(nèi)置的類型孔厉，但也是一個很有用的類型拯钻，我們來一點一點分析。首先這個泛型使用了 Pick撰豺，我們知道 Pick 就是取出一些屬性粪般，我們先看傳給 Pick 的第二個參數(shù)
{
[K in keyof O]: O[K] extends null | undefined ? never : K
}[keyof O]
它遍歷了 O 的 keys，然后進(jìn)行了一個判斷污桦，如果是extends null | undefined則返回 never亩歹，否則返回 K，K 就是 O 中的 key 值，注意這里和之前的一些泛型有些不一樣,之前的都是O[K]小作，而這里的屬性的值還是 K亭姥，最終我們得到的是類似K:K這樣的東西，比如{name: string, age: null}這個躲惰，經(jīng)過上面的轉(zhuǎn)化會變成{name:'name', age:never}致份，可能有些小伙伴還不清楚為什么要這樣轉(zhuǎn)換变抽，我們接著往下分析础拨，經(jīng)過這個轉(zhuǎn)換之后，又進(jìn)行了一個操作[keyof O]绍载，對于 Person诡宗，keyof O 就是'name'|'age'，那么這里就就是{name:'name', age:never}['name'|'age']击儡，這樣就很清晰了塔沃，其實就是一個取值操作，這樣我們就可以得到'name'|never阳谍，還記得 never 的特性嗎蛀柴，它可以幫我們消除一些類型，那么最終的就是'name'矫夯，這也是為什么我們寫成類似 K:K 這樣鸽疾，就是要把 null|undefined 對應(yīng)的 key 轉(zhuǎn)換成 never，然后再通過 keyof 把他們?nèi)既〕鰜硌得玻瑒e忘了最外面還有一個 Pick制肮，這樣我們就從原始類型中去除了 null|undefined。
另外還有一個比較有用的是 ReturnType
/**
* Obtain the return type of a function type
*/
type ReturnType<T extends (...args: any) => any> = T extends (
...args: any
) => infer R
? R
: any
它可以幫我們?nèi)〉胶瘮?shù)返回值的類型递沪，這個 ReturnType 接收的一個參數(shù)是函數(shù)豺鼻，然后進(jìn)行了一個判斷T extends (...args: any) => infer R，就是判斷是否是函數(shù)款慨，這里有個東西是 infer儒飒，通過這個操作符我們可以獲取 R 的引用，就是函數(shù)的返回值檩奠，最終再把 R 返回出去桩了，就獲得了函數(shù) T 的返回值。
其實除了我分析的這些泛型笆凌，TS 還內(nèi)置了其他的很多泛型圣猎，比如還有獲取函數(shù)的參數(shù)的，獲取構(gòu)造函數(shù)類型的乞而，總的來說各種泛型基本上都可以用索引類型和映射類型實現(xiàn)送悔，希望大家看過這篇文章后能多多使用這兩種類型，在自己的項目里也能開發(fā)一些常用的輔助泛型，來提升工作效率欠啤。
