TypeScript 类型编程之索引类型递归去掉可选修饰-前端开发

TypeScript类型编程之索引类型递归去掉可选修饰目录前言总结前言这两天东东遇到一个 TS 的问题,跑来问我. 问题是这样的: 这样一个 interface,想取出 userInfo 的类型来: interface Result{ data?: { userInfo?: { name: string; } } } 他是这样取的: type userInfo = Resu

前言

这两天东东遇到一个 TS 的问题，跑来问我。

问题是这样的：

这样一个 interface，想取出 userInfo 的类型来：

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

他是这样取的：

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

但是会报错：

说是 userInfo 不在这个联合类型上。

这很正常，因为可选索引的含义就是值和 undefined 的联合类型 value | undefined。

于是他问我应该怎么取？

我和他说这个问题有两种不同复杂度的解决方案，有简单的有复杂的，问他想听哪个。

他说想听简单的，于是我告诉他这样写：

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

Required 是 ts 内置的高级类型，是把索引类型的所有可选修饰去掉的。

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

但是这样虽然简单，当取的层数多了要写很多次 Required，也挺麻烦的。

然后东东又问我如果是复杂的那个，要怎么写？

我和他说复杂的那个写起来麻烦一些，但好处是用起来简单，不管多少层都只需要处理一次：

首先要知道 Required 是怎么实现的：

他这里用到了映射类型的语法，作用是对索引类型做一些修改，生成新的索引类型。

P in keyof T 就是遍历索引类型 T 中的所有索引 P，用来构造新的索引类型，值保持不变，也就是 T[P]。

构造的过程中可以加上可选的修饰、也可以去掉可选的修饰，还可以对值和索引做一些修改。

所以和 Required 相对的 Partial 就是这样实现的：

我们想一次处理完所有层级，都把可选的修饰给去掉，那就要递归处理，也就是这样：

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

遍历索引类型 Obj 中的所有索引 Key，通过 -? 去掉可选，然后对值要做一下判断，如果还是可选索引，那就递归处理。

那怎么实现这个 IsOptional 的判断索引是否是可选的高级类型呢？

判断某个类型要根据他的性质来，可选的性质就是 value | undefined，也就是说可能是空。

可以这样来实现可选的判断：

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

Obj 是索引类型，Key 是他的某个索引，因为可选索引的性质是可能为空，所以 {} 就可能是索引类型的子类型。

这里的 Pick 也是内置的高级类型，作用是取出一部分索引构造新的索引类型：

同样是通过映射类型的语法实现的：

这里 a 可能是没有的，那当没有的时候不就是 {} 么？所以可以用 {} extends Pick<Obj, Key> 来判断是不是可选索引。

综上，递归去掉索引类型的可选修饰就是这样实现的：

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]>
}

我们测试一下：