TypeScript中如何基于父对象属性判断子属性的类型？

问题原因 #

你原来的写法报错是因为 TypeScript 语法要求类型谓词（is 左侧的内容）只能是函数的入参名，不能是入参的属性，因此 container.data is DataA 是不合法的写法。

解决方案 #

方案1：优先改造Container为可辨识联合（最推荐）

把原来的单接口定义拆成带type区分的联合类型，后续不需要额外写类型守卫，TS可以自动做类型收窄：

// 先定义每种type对应的Container子类型
interface ContainerA {
  type: 'a'
  data: DataA
}
interface ContainerB {
  type: 'b'
  data: DataB
}
interface ContainerC {
  type: 'c'
  data: DataC
}
// 联合得到最终的Container类型
type Container = ContainerA | ContainerB | ContainerC

使用的时候直接判断type属性即可自动收窄：

if (container.type === 'a') {
  // 此处TS会自动推断container.data为DataA类型
  console.log(container.data)
}

方案2：如果不能修改原有Container接口定义

你可以构造对应type的子类型，把类型守卫的判断目标改为整个Container对象，而不是单独的data属性：

// 先声明type为a时的Container子类型
interface ContainerA extends Container {
  type: 'a'
  data: DataA
}

// 类型守卫用来判断入参是不是ContainerA类型
function isContainerA(container: Container): container is ContainerA {
  return container.type === 'a'
}

使用示例：

if (isContainerA(container)) {
  // 此处container.data自动收窄为DataA类型
  console.log(container.data)
}

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