147. 精读《@types react 值得注意的 TS 技巧》

1 引言

从 @types/react 源码中挖掘一些 Typescript 使用技巧吧。

2 精读

泛型 extends

泛型可以指代可能的参数类型，但指代任意类型范围太模糊，当我们需要对参数类型加以限制，或者确定只处理某种类型参数时，就可以对泛型进行 extends 修饰。

问题：React.lazy 需要限制返回值是一个 Promise<T> 类型，且 T 必须是 React 组件类型。

方案：

function lazy<T extends ComponentType<any>>(
  factory: () => Promise<{ default: T }>
): LazyExoticComponent<T>;

T extends ComponentType 确保了 T 这个类型一定符合 ComponentType 这个 React 组件类型定义，我们再将 T 用到 Promise<{ default: T }> 位置即可。

泛型 extends + infer

如果有一种场景，需要拿到一个类型，这个类型是当某个参数符合某种结构时，这个结构内的一种子类型，就需要结合 泛型 extends + infer 了。

问题：React.useReducer 第一个参数是 Reducer，第二个参数是初始化参数，其实第二个参数的类型是第一个参数中回调函数第一个参数的类型，那我们怎么将这两个参数的关系联系到一起呢？

方案：