如何在 TypeScript 中引用属于联合类型的类型？

Question

我在 TypeScript 中为动作定义了联合类型：

type Action = {
  type: 'reset',
} | {
  type: 'add',
  payload: number
} | {
  type: 'minus',
  payload: number
}

在某些函数中，我想引用联合类型的一部分，比如：

function handleAdd(state: State, action: {
  type: 'add',
  payload: number
}): State => {
  // handle the add
}

有没有办法简化action的输入所以我不需要重复完整的定义

{
  type: 'add',
  payload: number
}

这里？

更新：

我不想单独预定义每个动作类型。有没有其他解决方案，比如Action[type='add']？

Answer 1

这可以依靠distributive conditional types来实现：

type ExtractType<T extends Action['type'], A = Action> =
    A extends { type: T } ? A : never;

type Add = ExtractType<'add'>; // { type: 'add'; payload: number; }

Playground

分布式条件类型在实例化期间自动分布在联合类型上。例如，T extends U ? X : Y 的实例化具有 A | B | C 的类型参数 T 被解析为 (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)

Answer 2

创建一个缩小联合的类型：

type TypedAction<T extends Action['type']> = Extract<Action, {type: T}>

然后使用like:

(action: TypedAction<"add">)

Playground Link

Answer 3

将联盟的分支反应出来，所以

type Add = {
  type: 'add',
  payload: number
};
...
type Action = Add | ...;
...