TypeScript数组交叉类型在map()中丢失交叉信息的问题

问题复现 #

type Foo = { foo: number };
type Bar = { bar: string };

const arr: Foo[] & Bar[] = [{ foo: 1, bar: 'bar' }];
// const arr: (Foo & Bar)[] = [{ foo: 1, bar: 'bar' }]; // 可用版本

const item = arr[0]; // item: Foo & Bar
item.bar.length; // 类型正常

arr.map((item) => item.bar.length); // item: Foo，类型报错

原因分析 #

Foo[] & Bar[] 表示该值同时属于Foo类型数组和Bar类型数组，但TypeScript对这种交叉数组类型的方法解析存在局限性：

• 索引访问元素时，TypeScript能正确推断元素必须同时满足Foo和Bar的约束，因此类型为Foo & Bar——毕竟一个元素要同时存在于两种数组中，必然是两者的交集。
• 但对于map这类数组内置方法，TypeScript会分别提取Foo[]和Bar[]的map方法签名再交叉。虽然函数交叉的逆变规则要求回调参数类型应为Foo & Bar，但TypeScript的类型推断在此场景下未正确合并类型，反而优先取了其中一个数组的元素类型（Foo），导致Bar的类型信息丢失。

本质上，Foo[] & Bar[] 和 (Foo & Bar)[] 是完全不同的类型：前者是两个数组类型的交叉，后者是元素为交叉类型的数组，TypeScript对后者的方法处理更直接，因为元素类型明确是交集。

解决办法 #

若要保留Foo[] & Bar[]的类型定义，同时让map正确识别元素类型，可采用以下方案：

• 显式指定回调参数类型：直接在回调中声明item的类型为Foo & Bar，强制TypeScript使用正确类型：

  arr.map((item: Foo & Bar) => item.bar.length);
  

• 类型守卫断言：创建类型守卫函数，将交叉数组类型断言为元素为交叉类型的数组，后续方法调用即可正确推断：

  function isFooBarArray(arr: Foo[] & Bar[]): arr is (Foo & Bar)[] {
    return arr.every(item => 'foo' in item && 'bar' in item); // 可添加运行时校验
  }
  
  const safeArr = isFooBarArray(arr) ? arr : [];
  safeArr.map(item => item.bar.length); // item类型为Foo & Bar
  

• 类型别名封装：用类型别名封装(Foo & Bar)[]，兼顾代码可读性与类型正确性：

  type FooBarArray = (Foo & Bar)[];
  const arr: FooBarArray = [{ foo: 1, bar: 'bar' }];
  arr.map(item => item.bar.length); // 类型正常
  

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