TypeScript联合类型数组调用reduce报错，如何用泛型解决？

错误含义 #

这个错误的核心是：当你使用Primary[] | Secondary[]这种联合类型时，TypeScript无法确定你调用的是哪一种数组的reduce方法。Primary[]的reduce要求回调函数处理Primary类型元素，Secondary[]的reduce要求处理Secondary类型元素——这两个reduce的签名无法互相兼容，TypeScript找不到通用的调用方式，因此报错提示联合类型的成员签名不兼容，无法调用该方法。

是否需要泛型解决？ #

是的，泛型是解决这类联合类型数组方法调用冲突最优雅的方案。除此之外也可以用类型守卫，但泛型能让代码更通用、更简洁。

具体实现方式 #

方案1：基础泛型函数 #

将函数定义为泛型函数，让泛型T约束为Primary | Secondary，TypeScript会根据传入的实际数组类型自动推断T的具体值，明确reduce的调用签名：

type Primary = {
  name?: string;
  display_name?: string;
  git?: { branch?: string };
};

type Secondary = {
  name?: string;
  git?: { branch?: string };
  size?: number;
};

// 泛型函数，T约束为Primary或Secondary
function reduceFunction<T extends Primary | Secondary>(arr: T[] | undefined) {
  return arr?.reduce((acc: T, curr: T) => {
    // 安全访问两种类型的公共属性
    console.log(curr.name, curr.git?.branch);
    
    // 访问独有属性时用类型守卫区分
    if ('display_name' in curr) {
      // curr被推断为Primary类型
      console.log(curr.display_name);
    }
    if ('size' in curr) {
      // curr被推断为Secondary类型
      console.log(curr.size);
    }
    
    return acc;
  });
}

// 调用示例
const primaryArr: Primary[] = [{ name: "test", display_name: "Test" }];
const secondaryArr: Secondary[] = [{ name: "demo", size: 100 }];

reduceFunction(primaryArr);
reduceFunction(secondaryArr);
reduceFunction(undefined);

方案2：带初始值的泛型函数 #

如果reduce需要初始值，可以扩展泛型支持初始值类型U，让回调函数更灵活：

function reduceFunction<T extends Primary | Secondary, U>(
  arr: T[] | undefined,
  callback: (acc: U, curr: T) => U,
  initialValue: U
): U | undefined {
  return arr?.reduce(callback, initialValue);
}

// 调用示例：合并所有name属性
const allNames = reduceFunction(
  primaryArr,
  (acc, curr) => {
    curr.name && acc.push(curr.name);
    return acc;
  },
  [] as string[]
);

备选方案：类型守卫 #

如果不想用泛型，也可以通过类型守卫先明确数组的具体类型，再调用reduce：

function reduceFunction(arr: Primary[] | Secondary[] | undefined) {
  if (!arr) return;
  
  // 类型守卫：判断元素是否为Primary类型
  function isPrimary(item: Primary | Secondary): item is Primary {
    return 'display_name' in item;
  }

  if (arr.length > 0 && isPrimary(arr[0])) {
    // arr被推断为Primary[]
    return arr.reduce((acc, curr) => {
      // 处理Primary逻辑
      return acc;
    });
  } else {
    // arr被推断为Secondary[]
    return arr.reduce((acc, curr) => {
      // 处理Secondary逻辑
      return acc;
    });
  }
}

注意：这种方法在数组为空时，arr[0]为undefined，类型守卫会失效，因此泛型方案更可靠。

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