前言

這兩天東東遇到一個(gè) TS 的問題，跑來問我。

問題是這樣的：

這樣一個(gè) interface，想取出 userInfo 的類型來：

interface Result{
    data?: {
        userInfo?: {
            name: string;
        }
    }
}

他是這樣取的：

type userInfo = Result['data']['userInfo'];

但是會(huì)報(bào)錯(cuò)：

說是 userInfo 不在這個(gè)聯(lián)合類型上。

這很正常，因?yàn)榭蛇x索引的含義就是值和 undefined 的聯(lián)合類型 value | undefined。

于是他問我應(yīng)該怎么??？

我和他說這個(gè)問題有兩種不同復(fù)雜度的解決方案，有簡單的有復(fù)雜的，問他想聽哪個(gè)。

他說想聽簡單的，于是我告訴他這樣寫：

type userInfo = Required<Required<Result>['data']>['userInfo']

Required 是 ts 內(nèi)置的高級類型，是把索引類型的所有可選修飾去掉的。

所以每一層用 Required 處理一下再取索引的值就可以了。

但是這樣雖然簡單，當(dāng)取的層數(shù)多了要寫很多次 Required，也挺麻煩的。

然后東東又問我如果是復(fù)雜的那個(gè)，要怎么寫？

我和他說復(fù)雜的那個(gè)寫起來麻煩一些，但好處是用起來簡單，不管多少層都只需要處理一次：

首先要知道 Required 是怎么實(shí)現(xiàn)的：

他這里用到了映射類型的語法，作用是對索引類型做一些修改，生成新的索引類型。

P in keyof T 就是遍歷索引類型 T 中的所有索引 P，用來構(gòu)造新的索引類型，值保持不變，也就是 T[P]。

構(gòu)造的過程中可以加上可選的修飾、也可以去掉可選的修飾，還可以對值和索引做一些修改。

所以和 Required 相對的 Partial 就是這樣實(shí)現(xiàn)的：

我們想一次處理完所有層級，都把可選的修飾給去掉，那就要遞歸處理，也就是這樣：

type DeepRequired<Obj> = {
    [Key in keyof Obj]-?: IsOptional<Key, Obj> extends never? Obj[Key]: DeepRequired<Obj[Key]>
}

遍歷索引類型 Obj 中的所有索引 Key，通過 -? 去掉可選，然后對值要做一下判斷，如果還是可選索引，那就遞歸處理。

那怎么實(shí)現(xiàn)這個(gè) IsOptional 的判斷索引是否是可選的高級類型呢？

判斷某個(gè)類型要根據(jù)他的性質(zhì)來，可選的性質(zhì)就是 value | undefined，也就是說可能是空。

可以這樣來實(shí)現(xiàn)可選的判斷：

type IsOptional<Key extends keyof Obj, Obj> = 
    {} extends Pick<Obj, Key> ? Key : never;

Obj 是索引類型，Key 是他的某個(gè)索引，因?yàn)榭蛇x索引的性質(zhì)是可能為空，所以 {} 就可能是索引類型的子類型。

這里的 Pick 也是內(nèi)置的高級類型，作用是取出一部分索引構(gòu)造新的索引類型：

同樣是通過映射類型的語法實(shí)現(xiàn)的：

這里 a 可能是沒有的，那當(dāng)沒有的時(shí)候不就是 {} 么？ 所以可以用 {} extends Pick<Obj, Key> 來判斷是不是可選索引。

綜上，遞歸去掉索引類型的可選修飾就是這樣實(shí)現(xiàn)的：

type IsOptional<Key extends keyof Obj, Obj> = 
    {} extends Pick<Obj, Key> ? Key : never;

type DeepRequired<Obj> = {
    [Key in keyof Obj]-?: IsOptional<Key, Obj> extends never? Obj[Key]: DeepRequired<Obj[Key]>
}

我們測試一下：

現(xiàn)在只要處理一次，就可以取任意層級的索引值了，方便了很多。

其實(shí)寫成這樣就可以用了，但是有時(shí)候你會(huì)遇到這樣的問題：

TS 沒有把最終的結(jié)果計(jì)算出來。

這個(gè)是 TS 的機(jī)制，默認(rèn)是懶計(jì)算的，用不到的不會(huì)計(jì)算。

那怎么讓他計(jì)算出最終結(jié)果呢？

加上一段邏輯觸發(fā)計(jì)算就可以了，比如 xxx extends any 這種肯定會(huì)成立的條件判斷：

再測試一下你就會(huì)發(fā)現(xiàn) TS 計(jì)算出了最終的結(jié)果：

總結(jié)

想取一個(gè)可選索引的值，需要先用 Required 把索引類型去掉可選然后再取。但是當(dāng)層數(shù)多了的話，這樣一層層處理挺麻煩的，可以用類型編程遞歸處理下。

用映射類型的語法去掉索引類型的可選修飾，判斷值的類型，如果還是可選的索引，那就繼續(xù)遞歸的處理。

判斷可選索引是通過可選的性質(zhì)來的，可選索引的值是 value | undefined, 所以 {} extends Pick<Obj, Key> 成立的話就代表這個(gè) Key 是可選的。

可能會(huì)遇到類型沒有全部計(jì)算的問題，這是 TS 的機(jī)制，默認(rèn)是懶計(jì)算的，可以加上 xx extends any 這種不影響結(jié)果的條件類型來觸發(fā)計(jì)算。

層層用 Required 處理在層數(shù)少的情況下比較簡單，但層數(shù)多了的時(shí)候還是遞歸處理更方便一些，而且這樣的高級類型是可以復(fù)用的，可以用在別的地方，這也是類型編程的好處。

到此這篇關(guān)于TypeScript 類型編程之索引類型遞歸去掉可選修飾的文章就介紹到這了,更多相關(guān)TypeScript 索引類型遞歸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論