TypeScript合并类型表现异常：直接访问与map类型不一致问题

算力阿峰

2026-6-29

类型交叉后的访问差异问题解析

先看你的代码：

interface Task {
  a: string;
  b: number;
}

interface Context {
  tasks: Task[];
  z: number;
}

export type MoreContext<T extends string> = {
  [key in T]: {
    c: string;
  }[];
} & {
  x: string;
  y: string;
};

type C = Context & MoreContext<'tasks'>;

const exampleFn = (props: C) => {
  props.tasks[0].a;
  props.tasks[0].b;
  // 此处正常
  props.tasks[0].c;
  props.tasks.map((t) => {
    t.a;
    t.b;
    // TS错误：c不存在于Task类型上
    t.c;
  });
};

为什么直接访问和map遍历的表现不一样？

核心原因是TypeScript对直接属性访问和泛型方法参数推断的处理逻辑不同：

直接访问props.tasks[0].c时：
TypeScript会直接解析tasks的交叉类型——Task[]和{c: string}[]的交叉，意味着数组的每个元素都是Task & {c: string}。所以访问tasks[0]时，TypeScript能正确识别这个元素是两个类型的交叉，允许访问a、b、c。
调用map方法时：
Array.prototype.map是泛型方法，TypeScript在推断回调参数类型时，会优先取数组的“基础类型”。这里tasks的类型是Task[] & {c: string}[]，但TypeScript会把它当成Task[]来处理，所以回调里的t被推断为Task，自然找不到c属性。

简单说，直接访问是针对具体元素做类型合并，而泛型方法会优先用数组的原始元素类型来推断参数，忽略了交叉类型里的额外属性。

怎么解决？

有两种常见方式：

显式指定回调参数类型：
直接在回调里把t的类型声明为Task & {c: string}，强制TypeScript使用交叉后的类型：
```
props.tasks.map((t: Task & {c: string}) => {
  t.a;
  t.b;
  t.c; // 不再报错
});
```
重新定义类型，避免交叉数组：
把MoreContext改成直接合并元素类型，而不是交叉两个数组类型：
```
export type MoreContext<T extends string> = {
  [key in T]: (Task & {c: string})[];
} & {
  x: string;
  y: string;
};
```
这样tasks的类型直接就是(Task & {c: string})[]，map回调里的t自然能推断出包含c属性。