TypeScript指定联合类型action后label自动补全异常如何解决？

问题原因 #

这个问题是TypeScript对未输入完成的对象字面量的类型收窄策略导致的：
你输入action({action:"baz",label:""的时候，整个参数对象还处于不完整状态，TS不会提前基于你已经输入的action: "baz"把参数类型收窄到联合类型对应的单个分支，而是会把整个Foo联合类型里所有label的可选值都列出来作为补全选项，避免你后续修改action属性时补全提示失效。

解决方法 #

调整类型结构，用映射表+泛型的写法替代直接写联合类型，让TS可以在你输入action属性的第一时间就锁定对应的label类型：

// 先定义action到对应label可选值的映射关系
type ActionLabelMap = {
  foo: '1' | '2'
  bar: '4'
  baz: '8'
}

// 用泛型生成可辨识联合类型
type Foo<T extends keyof ActionLabelMap = keyof ActionLabelMap> = T extends T ? {
  action: T
  label: ActionLabelMap[T]
} : never

// 函数参数用泛型约束，输入action后直接推导泛型参数
function action<T extends keyof ActionLabelMap>(action: Foo<T>) {
  return action
}

修改后当你输入action:"baz"时，TS会直接把泛型T推导为"baz"，对应的label类型就被限制为只能是"8"，自动补全就只会提示"8"这一个选项。

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