如何在TypeScript中实现仅支持同类型字符串/数字的add函数？

在JavaScript中我们可以简单实现一个add函数：

function add(a, b) {
  return a + b;
}

但在TypeScript中，我们需要限制参数类型，确保两个参数要么都是数字，要么都是字符串，禁止数字和字符串混传。直接使用(a: string|number, b: string|number): string|number的写法无法满足需求，因为它允许一个参数是数字、另一个是字符串的非法调用。

解决方案1：函数重载 #

通过定义明确的重载签名，TypeScript会严格校验调用是否匹配允许的类型组合：

// 定义允许的调用签名
function add(a: number, b: number): number;
function add(a: string, b: string): string;

// 函数实现（仅在内部可见，外部调用需匹配上面的重载）
function add(a: string | number, b: string | number): string | number {
  return a + b;
}

• 合法调用：add(1, 2)、add('hello', 'world')，TypeScript会自动推断返回值类型
• 非法调用：add(1, 'world')、add('hello', 2)，会直接触发类型错误

解决方案2：泛型约束 #

使用泛型约束强制两个参数为同一类型，该类型只能是string或number：

function add<T extends string | number>(a: T, b: T): T {
  // 类型断言确保返回值类型与T一致
  return a + b as T;
}

这种方式通过泛型T约束参数类型统一，同样能实现需求：

• 当传入两个数字时，返回值类型为number
• 当传入两个字符串时，返回值类型为string
• 混传类型会直接触发TypeScript的类型检查错误

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