TypeScript联合类型访问属性报Property does not exist如何解决？

问题原因 #

TypeScript 仅允许访问联合类型所有成员共有的属性，IceBox 不存在 desc 属性，因此直接书写 UnionBox['desc'] 会抛出类型错误。

解决方法 #

使用分布式条件类型遍历联合类型的每个成员，针对单个成员判断是否存在 desc 属性，返回对应类型：

// 通用类型工具：传入联合类型，有desc取desc，无desc取name
type DescOrName<T> = T extends { desc: unknown } ? T['desc'] : T['name']

interface FruitBox {
  name: string
  desc: {
   'orange': number;
   'banana': number;
  }
}

interface IceBox {
  name: string
}

interface Vegabox {
  name: string
  desc: {
   'tomato': number;
   'potato': number;
  }
}

type UnionBox = FruitBox | Vegabox | IceBox;

// 最终Ship类型定义
type Ship = Record<string, (description: DescOrName<UnionBox>) => void>;

类型验证 #

最终 DescOrName<UnionBox> 推导结果为：

| { orange: number; banana: number }
| { tomato: number; potato: number }
| string

完全匹配需求。

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