TypeScript中联合类型函数参数的类型不兼容问题

问题根源 #

TypeScript中函数参数遵循逆变原则：如果一个函数类型要求接受A | B类型的参数，那么它不能被仅接受A或仅接受B的函数赋值。因为前者需要能处理所有联合类型的输入，而后者只能处理其中一种，不符合类型安全要求。你定义的Sum类型是接受TwoNumbers | ThreeNumbers的联合类型，但实现的计算器sum方法只接受单个子类型，因此触发类型不兼容错误。

解决方案：泛型绑定具体数组类型 #

通过泛型让Calculator和Sum类型与具体的数组长度类型绑定，这样每个计算器的sum方法只需处理对应长度的数组，同时保留固定数组长度的类型检查：

// 定义泛型Sum和Calculator，绑定具体的数组类型
type Sum<T extends number[]> = (numbersToSum: T) => number;
type Calculator<T extends number[]> = {
  sum: Sum<T>;
};

// 定义固定长度的数组类型
type TwoNumbers = [number, number];
type ThreeNumbers = [number, number, number];

// 实现对应计算器，类型完全匹配
const TwoNumberCalculator: Calculator<TwoNumbers> = {
  sum: (numbersToSum) => numbersToSum[0] + numbersToSum[1],
};

const ThreeNumberCalculator: Calculator<ThreeNumbers> = {
  sum: (numbersToSum) => numbersToSum[0] + numbersToSum[1] + numbersToSum[2],
};

统一管理多个计算器（可选） #

如果需要将不同类型的计算器统一存放或处理，可以定义联合类型：

type AnyCalculator = Calculator<TwoNumbers> | Calculator<ThreeNumbers>;
const calculators: AnyCalculator[] = [TwoNumberCalculator, ThreeNumberCalculator];

这样既保证了每个计算器的类型安全，又能直接通过索引访问固定长度数组的元素，完全满足需求。

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