为何TypeScript提示Property 'key'不存在于指定联合类型？

我写了这段TSX代码：

<th key={header?.key ? header.key : header} ref={ref}>

其中header属于Column类型里定义的{key: string, element: JSX.Element} | string联合类型，但TypeScript报错：

Property 'key' does not exist on type 'string | { key: string; element: Element; }'

我搞不懂为啥会报这个错，按类型定义来看应该能访问.key属性啊。Column类型定义如下：

export type Column<T = any> = {
  header: {key: string, element: JSX.Element} | string;
  size: keyof typeof COLUMN_SIZES;
  sortable?: boolean;
  property: string;
  ref?: React.MutableRefObject<HTMLTableHeaderCellElement>;
  render?: (datum: T, index?: number) => string;
  renderer?: React.FC<IRendererProps>;
};

报错原因 #

TypeScript对联合类型的属性访问有严格限制：只有当联合类型的所有成员都拥有某个属性时，你才能直接访问这个属性。你的header是对象 | string的联合类型，string类型根本没有key属性，所以哪怕用了可选链?.，TypeScript依然会报错——可选链只是用来处理值为null/undefined的情况，没法解决“某个类型本身就没有该属性”的问题。

解决办法 #

你需要用类型守卫把两种类型区分开，让TypeScript知道当前header到底是哪一种类型，之后再访问属性就不会报错了。这里有两种常用写法：

方法1：用in操作符判断 #

<th key={('key' in header) ? header.key : header} ref={ref}>

'key' in header会告诉TypeScript：当这个条件为真时，header一定是带key属性的对象类型，此时就能安全访问header.key；否则就是string类型，直接用header就行。

方法2：用typeof判断是否为字符串 #

<th key={typeof header === 'string' ? header : header.key} ref={ref}>

这种写法逻辑和上面反过来：先判断header是不是字符串，如果是就直接用；否则就认定它是带key的对象，访问header.key。

两种写法都能解决你的类型报错问题，选哪种看个人习惯就行。

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