TypeScript交集类型右侧在数组map操作时丢失问题咨询

问题场景 #

在TypeScript 5.0.2中，我们定义了包含数组交集类型的对象：

type MyType = {
  containers: { name: string }[] & { value: string }[]
}

const data: MyType = {
  containers: [{ name: "name", value: "ddd" }]
}

使用for...of遍历data.containers时，TypeScript能正确识别元素同时拥有name和value属性；但调用Array.map方法时，却报错提示value属性不存在于{name: string}类型上。

核心原因 #

这是TypeScript对数组交集类型的类型推断路径差异导致的：

• for...of的类型解析逻辑：for...of依赖对象的可迭代协议（Symbol.iterator），对于数组交集类型，TypeScript会直接解析迭代器返回值的类型，正确推导出元素是两个数组元素类型的交集（{name: string} & {value: string}），因此能识别所有属性。
• Array.map的泛型匹配限制：Array.prototype.map的类型定义是基于标准泛型数组Array<T>的。当传入数组交集类型时，TypeScript的类型系统会优先将其匹配到第一个符合数组结构的类型（即{name: string}[]），而非完整保留交集信息。这就导致map回调的参数被推断为单一的{name: string}类型，从而触发报错。

解决方法 #

有两种常见的修复方式：

1. 显式指定map的泛型参数：

data.containers.map<{name: string} & {value: string}>(container => {
  const { name, value } = container; // 类型正常识别
})

2. 调整类型定义方式：直接将数组元素定义为两个类型的交集，而非数组类型的交集，避免TypeScript的类型简化：

type MyType = {
  containers: ({ name: string } & { value: string })[]
}

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