TypeScript用Pick复用Command属性定义Handler出现TS2322报错如何解决

错误原因 #

Pick<T, 'type'>是TS内置的工具类型，作用是从对象类型T中筛选出指定属性，返回新的对象类型。你传入Pick<MyCommand, 'type'>得到的类型是{ type: 'MyCommand' }，不是type属性对应的值类型'MyCommand'，自然无法和字符串值匹配。

解决方案 #

要取泛型T中type属性的类型，直接用索引访问类型T['type']即可，修改Handler类型定义如下：

export type Handler<T extends Command> = {
  type: T['type']
}

修改后完整无报错的代码如下：

export type Command<
  Type extends string = string,
> = {
  type: Type
}

export type Handler<T extends Command> = {
  type: T['type']
}

export type MyCommand = Command<'MyCommand'>

const MyHandler = (): Handler<MyCommand> => {
  return {
    type: 'MyCommand'
  }
}

如果你非要保留Pick写法，也可以写成Pick<T, 'type'>['type']，但冗余度更高，更推荐直接用索引访问的写法。

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