TypeScript如何提取泛型参数？实现自定义GenericType工具类型

TypeScript 没有提供可直接提取任意泛型参数的通用内置工具类型，可基于TS原生的infer条件类型推断特性，自行实现符合需求的GenericType工具类型。

工具类型实现与示例验证 #

针对数组、Promise两类常用泛型场景，可按如下方式定义GenericType：

type GenericType<T> =
  // 提取数组元素类型
  T extends Array<infer Item> ? Item :
  // 提取Promise resolve返回值类型
  T extends Promise<infer Res> ? Res :
  never;

效果验证：

const foo = ['foo']
type MyStringType = GenericType<typeof foo> // 推导结果为string，符合预期

let bar: Promise<number>
type MyNumberType = GenericType<typeof bar> // 推导结果为number，符合预期

jest-axe类型问题适配 #

使用jest-axe时触发的TS2503: Cannot find namespace 'axe'报错，本质是库的类型定义未暴露axe全局命名空间。无法直接导入AxeResults类型时，前述工具类型可直接解决问题：
axe方法执行后的返回值类型为Promise<AxeResults>，ReturnType<typeof axe>会得到Promise<AxeResults>，套一层GenericType即可直接提取出目标AxeResults类型，无需依赖命名空间导入。

如果后续需要提取其他泛型结构的类型参数（比如Map、自定义泛型类等），只需要在GenericType的条件分支里追加对应规则即可，例如要提取Map的值类型，可新增分支T extends Map<any, infer Value> ? Value。TS不存在能适配所有泛型结构的万能参数提取工具，按需扩展分支即可覆盖绝大多数使用场景。

问题参考截图 #

内容的提问来源于stack exchange，提问作者A.A