前言

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

問題是這樣的：

這樣一個 interface，想取出 userInfo 的類型來：

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

他是這樣取的：

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

但是會報錯：

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

這很正常，因為可選索引的含義就是值和 undefined 的聯(lián)合類型 value | undefined。

于是他問我應該怎么取？

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

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

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

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

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

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

然后東東又問我如果是復雜的那個，要怎么寫？

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

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

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

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

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

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

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

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

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

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

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

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

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

Obj 是索引類型，Key 是他的某個索引，因為可選索引的性質是可能為空，所以 {} 就可能是索引類型的子類型。

這里的 Pick 也是內置的高級類型，作用是取出一部分索引構造新的索引類型：

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

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

綜上，遞歸去掉索引類型的可選修飾就是這樣實現(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)在只要處理一次，就可以取任意層級的索引值了，方便了很多。

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

TS 沒有把最終的結果計算出來。

這個是 TS 的機制，默認是懶計算的，用不到的不會計算。

那怎么讓他計算出最終結果呢？

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

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

總結

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

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

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

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

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

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

最新評論