TypeScript 泛型类型数组定义使用出现类型不匹配问题如何解决

错误原因 #

你之前定义的Foo<Mapped, 'str' | 'num'>是将联合类型整体代入泛型参数，最终生成的类型结构如下：

{
  value: 'str' | 'num',
  fun: (val: string | number) => number
}

这和单独的Foo<Mapped, 'str'>、Foo<Mapped, 'num'>类型不兼容，因为后者的fun参数是固定的单一类型，不接收联合类型入参，因此无法直接放到同一个数组中。

解决方案 #

通过映射类型+索引签名实现泛型的分布式分发，把每个键对应的Foo类型生成后再合并为联合类型，具体实现如下：

1. 定义分布式Foo类型

// 遍历T的所有键，生成每个键对应的Foo类型，再合并为联合类型
type DistributedFoo<T> = {
  [K in keyof T]: Foo<T, K>
}[keyof T]

2. 用该类型定义数组

type Foos = Array<DistributedFoo<Mapped>>

完整可运行代码示例 #

interface Mapped {
  str: string,
  num: number
}

type Foo<T, K extends keyof T> = {
  value: K,
  fun: (val: T[K]) => number;
}

// 新增分布式类型定义
type DistributedFoo<T> = {
  [K in keyof T]: Foo<T, K>
}[keyof T]

const fooStr: Foo<Mapped, 'str'> = {
  value: 'str',
  fun: (val) => val.length
}

const fooNum: Foo<Mapped, 'num'> = {
  value: 'num',
  fun: (val) => val
}

// 数组类型使用分布式定义
type Foos = Array<DistributedFoo<Mapped>>
const foos: Foos = [fooStr, fooNum] // 无赋值报错

const map: Mapped = {
  str: 'foo',
  num: 42
}

foos.forEach((foo) => {
  const val = map[foo.value]
  foo.fun(val) // 无调用报错，TS能自动识别value和fun参数的对应关系
})

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