如何让TypeScript通过对象type字段关联event字段的类型？

问题场景 #

你定义了如下TypeScript类型：

type Event = {
  ts: Date,
  type: 'birthday' | 'wedding',
  event: Birthday | Wedding
}

目前你通过event字段的属性做类型收窄：

if ('partners' in evt.event) {
  // TypeScript自动识别evt.event为Wedding类型
  sendWeddingInvite(evt.event)
} else {
  // TypeScript判定这里是Birthday类型
}

但你希望改用type字段实现类型收窄，不想用evt.event as Wedding这种类型断言的写法，想找更优方案。

优化方案：使用可辨识联合类型 #

把Event改成可辨识联合类型，让type字段作为类型辨识符，同时让每个分支的type与event类型一一绑定，这样TypeScript就能通过type的值自动收窄event的类型，无需手动断言。

重新定义类型 #

// 先定义具体的子类型
type Birthday = {
  // 补充Birthday的属性，比如name: string
};
type Wedding = {
  partners: string[];
  // 补充Wedding的其他属性
};

// 改成可辨识联合类型
type Event = 
  | { ts: Date; type: 'birthday'; event: Birthday }
  | { ts: Date; type: 'wedding'; event: Wedding };

使用示例 #

function sendWeddingInvite(wedding: Wedding) {
  // 函数实现
}

function handleEvent(evt: Event) {
  if (evt.type === 'wedding') {
    // TypeScript自动推断evt.event为Wedding类型，无需断言
    sendWeddingInvite(evt.event);
  } else {
    // 这里TypeScript自动推断evt.event为Birthday类型
    console.log('处理生日事件:', evt.event);
  }
}

方案优势 #

原来的Event是单一对象类型，type和event是独立的联合类型，TypeScript无法建立两者的关联关系；改成可辨识联合类型后，每个分支的type与event强绑定，TypeScript能通过type的取值精准收窄event的类型，既保证了类型安全，又避免了手动类型断言的冗余代码。

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