如何让TypeScript根据事件参数自动推断Payload的特定类型？

要让TypeScript根据event参数自动推断payload的对应类型，核心是要让TS建立事件类型与Payload类型的绑定关系，而不是让它们成为两个独立的联合类型。以下是具体解决方案：

方案1：使用带标签的联合类型（推荐） #

将event和payload合并为一个包含type标签的联合类型，TS会自动通过type字段进行类型窄化：

// 定义所有事件的联合类型，每个事件包含type标签和对应Payload
type AppEvent =
  | { type: 'READY'; payload: { A: string } }
  | { type: 'CONNECTING'; payload: { B: number } };

function handleEvent(event: AppEvent) {
  if (event.type === 'READY') {
    // TS自动推断payload为{ A: string }，可安全访问A属性
    console.log(event.payload.A);
  } else if (event.type === 'CONNECTING') {
    console.log(event.payload.B);
  }
}

这种方式最符合TypeScript的类型设计逻辑，无需额外类型断言或守卫，代码简洁且类型安全。

方案2：分开传参时使用自定义类型守卫 #

如果必须将event和payload作为独立参数传递，需要通过自定义类型守卫明确关联两者的类型：

// 定义各事件对应的Payload类型
type ReadyPayload = { A: string };
type ConnectingPayload = { B: number };

// 建立事件到Payload的映射
type EventPayloadMap = {
  READY: ReadyPayload;
  CONNECTING: ConnectingPayload;
};

// 自定义类型守卫，判断当前event对应的payload是否符合类型
function matchesEventPayload<E extends keyof EventPayloadMap>(
  event: E,
  payload: unknown
): payload is EventPayloadMap[E] {
  // 这里可根据实际需求添加运行时校验逻辑
  switch (event) {
    case 'READY':
      return typeof (payload as ReadyPayload).A === 'string';
    case 'CONNECTING':
      return typeof (payload as ConnectingPayload).B === 'number';
    default:
      return false;
  }
}

function handleEvent(event: keyof EventPayloadMap, payload: unknown) {
  if (event === 'READY' && matchesEventPayload(event, payload)) {
    // TS确认payload为ReadyPayload，可安全访问A
    console.log(payload.A);
  } else if (event === 'CONNECTING' && matchesEventPayload(event, payload)) {
    console.log(payload.B);
  }
}

为什么原写法会报错？ #

原代码中event和payload是两个独立的联合类型（比如event: 'READY' | 'CONNECTING'，payload: ReadyPayload | ConnectingPayload），TypeScript无法建立两者的关联关系——它不知道当event为READY时，payload一定是ReadyPayload，因此会提示A属性可能不存在于CONNECTING对应的Payload类型中。

替代方案：函数重载 #

也可以通过函数重载明确每个事件对应的参数类型，但实现体中仍需配合类型断言或守卫：

type ReadyPayload = { A: string };
type ConnectingPayload = { B: number };

// 定义函数重载签名
function handleEvent(event: 'READY', payload: ReadyPayload): void;
function handleEvent(event: 'CONNECTING', payload: ConnectingPayload): void;

// 实现体
function handleEvent(
  event: 'READY' | 'CONNECTING',
  payload: ReadyPayload | ConnectingPayload
) {
  if (event === 'READY') {
    console.log((payload as ReadyPayload).A);
  }
}

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