遍历对象数组查找指定Key时遇TypeScript错误：原因及解决方法

问题背景 #

需要遍历对象数组，找到包含特定Key的元素（该Key仅存在于数组中一个对象或不存在）。示例代码如下：

const arr: [
  { foo: number; fooo: number },
  { bar: number; barr: number },
  { baz: number; bazz: number }
] = [
  { foo: 100, fooo: 1 },
  { bar: 3, barr: 200 },
  { baz: 0, bazz: 0 },
];

使用以下代码查找含baz的对象：

const wantedObj = arr.find((el) => (typeof el.baz !== 'undefined'))

由于Key的值可能为假值（如0），因此用typeof el.baz !== 'undefined'作为判断条件，但触发TypeScript错误：

Property 'bazz' does not exist on type '{ foo: number; fooo: number; } | { bar: number; barr: number; } | { baz: number; bazz: number; }'.
Property 'bazz' does not exist on type '{ foo: number; fooo: number; }'.ts(2339)

错误原因 #

数组arr的类型是联合类型的元组，find回调中的el类型是三个对象类型的联合。TypeScript会严格检查联合类型的属性访问：只有当所有联合成员都包含某个属性时，才能直接访问该属性。而baz只存在于第三个对象类型中，前两个类型没有这个属性，因此直接访问el.baz会触发类型错误。

解决方法 #

方法1：使用in操作符作为类型守卫 #

in操作符是TypeScript原生支持的类型守卫，能自动缩小类型范围。修改判断条件为：

const wantedObj = arr.find((el) => 'baz' in el);

此时TypeScript会识别出，当'baz' in el为真时，el的类型是{ baz: number; bazz: number; }，不会再报错。

方法2：自定义类型谓词函数 #

如果需要更明确的类型判断逻辑，可以定义一个类型谓词函数，手动指定判断后的类型：

function hasBaz(el: typeof arr[number]): el is { baz: number; bazz: number } {
  return typeof el.baz !== 'undefined';
}

const wantedObj = arr.find(hasBaz);

这种方式可读性更强，适合复杂的类型判断场景。

方法3：临时类型断言（不推荐） #

如果只是临时绕过类型检查，可以用any断言，但会丢失TypeScript的类型安全保障：

const wantedObj = arr.find((el: any) => typeof el.baz !== 'undefined');

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