## 前言 `infer`是在`typescript 2.8`中新增的关键字，几乎所有复杂的类型方法都有`infer`的身影。 ## infer `infer`可以在`extends`的条件语句中推断待推断的类型。例如我们可以使用`infer`来推断函数的返回值类型。 ```typescript type MyReturnType = T extends (...args: any[]) => infer R ? R : T; type func = () => number; type variable = string; type funcReturnType = MyReturnType; // funcReturnType 类型为 number type varReturnType = MyReturnType; // varReturnType 类型为 string ``` 在这个例子中，`infer R`代表待推断的返回值类型，如果`T`是一个函数，则返回函数的返回值，否则返回`T`本身。仅仅通过这一个例子，是很难看出`infer`是用来干什么的，还需要多看几个例子。 ### infer解包 `infer`的作用不止是推断返回值，还可以解包，假如想在获取数组里的元素类型，在不会`infer`之前我是这样做的。 ```typescript type Ids = number[]; type Names = string[]; type Unpacked = T extends Names ? string : T extends Ids ? number : T; type idType = Unpacked; // idType 类型为 number type nameType = Unpacked; // nameType 类型为string ``` 上次我写了20多行，就为了获取一堆各种不同类型的数组里的元素类型，然而如果使用`infer`来解包，会变得十分简单。 ```typescript type Unpacked = T extends (infer R)[] ? R : T; type idType = Unpacked; // idType 类型为 number type nameType = Unpacked; // nameType 类型为string ``` 这里`T extends (infer R)[] ? R : T`的意思是，如果`T`是某个待推断类型的数组，则返回推断的类型，否则返回`T` 再比如，想要获取一个`Promise`类型中的`xxx`类型。 ```typescript type MyResponse = Promise; type Unpacked = T extends Promise ? R : T; type resType = Unpacked; // resType 类型为number[] ``` 不仅如此，还可以使用递归来获取多层`Promise`的返回结果。 ```typescript type MyResponse = Promise>>; type Unpacked = T extends Promise ? Unpacked : T; // 递归 type resType = Unpacked; // resType 类型为number ``` ### infer 推断模版字符串模版字符串是v4.1新增的类型，这是官网的一个例子。 ```typescript type World = "world"; type Greeting = `hello ${World}`; // "hello world" ``` 我们可以写一个数字转字符串的类型方法。 ```typescript type NumberToString = `${T}`; type Value = NumberToString<5>; // "5" ``` 同样，`infer`也可以推断模版字符串。 ```typescript type PickValue = T extends `${infer R}%` ? R : unknown; type Value = PickValue<"50%"> // "50" ``` 稍微复杂一点的，`TrimLeft`去除左侧空串。 ```typescript type TrimLeft = T extends ` ${infer R}` ? TrimLeft : T; type Value = TrimLeft<" value">; // "value" ``` 如果再写一个`TrimRight`，组合起来，就能实现`Trim`方法，同时去除左右字符串。 ### infer推断联合类型还是官方文档的例子。 ```typescript type Foo = T extends { a: infer U; b: infer U } ? U : never; type T10 = Foo<{ a: string; b: string }>; // T10类型为 string type T11 = Foo<{ a: string; b: number }>; // T11类型为 string | number ``` 同一个类型变量在推断的值有多种情况的时候会推断为联合类型，针对这个特性，很方便的可以将元组转为联合类型。 ```typescript type ElementOf = T extends (infer R)[] ? R : never; type TTuple = [string, number]; type Union = ElementOf; // Union 类型为 string | number ``` ### infer 遍历数组使用`infer`可以递归遍历数组，实现一个`ReverseArray`方法。 ```typescript type ReverseArray = T extends [infer First, ...infer Rest] ? [...ReverseArray, First] : T type Value = ReverseArray<[1, 2, 3, 4]> // [4,3,2,1] ``` ### React中infer的使用在`React`的`typescript`源码中应该常常使用`infer` 就拿`useReducer`来举例子，如果我们这样使用`useReducer` ```typescript const reducer = (x: number) => x + 1; const [state, dispatch] = useReducer(reducer, ''); // Argument of type "" is not assignable to parameter of type 'number'. ``` 这里`useReducer`会报一个类型错误，说`""`不能赋值给`number`类型那么`React`这里是如何通过`reducer`函数的类型来判断`state`的类型呢？查看`userReducer`的定义，定义如下： ```typescript function useReducer, I>( reducer: R, // ReducerState 推断类型 initializerArg: I & ReducerState, initializer: (arg: I & ReducerState) => ReducerState ): [ReducerState, Dispatch>]; // infer推断 type ReducerState> = R extends Reducer ? S : never; // Reducer类型 type Reducer = (prevState: S, action: A) => S; ``` 一切明了了，使用了`infer`推断`reducer`函数里的`state`参数类型。 ## 总结 `infer`是非常有用的，如果想要摆脱仅仅是在写带类型的`javascript`，高级特性一定要了解。想要深入的练习`infer`，加强体操技巧，可以做一下[type-chalenges](https://github.com/type-challenges/type-challenges)。比如说实现上面我提到的[Trim](https://github.com/type-challenges/type-challenges/blob/main/questions/00108-medium-trim/README.zh-CN.md)。 ## 题外话分享一道比较复杂的练习题原题就不贴出了，在这里可以看见 [github](https://github.com/LeetCode-OpenSource/hire/blob/master/typescript_zh.md) 分享一下我的思路 0. 首先先取得函数的名字，通过`extends`关键字可以判断是否是函数，是返回键名，不是返回`never`，最后使用映射类型`[keyof T]`的方式来获取键名的联合类型，因为`never`和任何类型组联合类型都会过滤掉`never`，所以自然排除了`never` 0. 就用`infer`硬推题解如下： ```typescript type EffectModuleFuncName = { [K in keyof EffectModule]: EffectModule[K] extends Function ? K : never; }[keyof EffectModule]; type UnPackedPromise = T extends Promise ? P : T; type EffectModuleFunc = T extends (params: infer P) => infer U ? P extends Promise ? (v: R) => UnPackedPromise : P extends Action ? (v: X) => UnPackedPromise : never : never; // 修改 Connect 的类型，让 connected 的类型变成预期的类型 type Connect = ( module: EffectModule, ) => { [K in EffectModuleFuncName]: EffectModuleFunc }; ``` 也不知道自己写的对不对，总觉得怪怪的，可以讨论一下。 --- 参考资料： 1. [TypeScript文档](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html) 2. [深入理解TypeScript](https://jkchao.github.io/typescript-book-chinese/tips/infer.html#%E4%BB%8B%E7%BB%8D) --- 最后，祝大家身体健康，工作顺利！欢迎大家关注我的公众号～ ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/5/27/1725672f4e4694e9~tplv-t2oaga2asx-image.image)