如何在 TypeScript 中制作适用于数字和字符串的通用加法运算符

Question

在学习 TypeScript 中的泛型时，我想尝试重新创建以下内容 JavaScript：

function add(x, y){
    return x + y;
}

我试过：

type StringOrNumber = string | number;

function add<MyType extends StringOrNumber>(x: MyType, y: MyType): MyType {
    return x + y;
}

此错误为：

error TS2365: Operator '+' cannot be applied to types 'MyType' and 'MyType'.

为什么这行不通？我假设 MyType 可以是字符串或数字，一旦 "chosen" TypeScript 就会知道它是在添加两个字符串或两个数字。

Answer 1

也可能发生的情况是 MyType 可以是 string | number 其中 extends StringOrNumber。例如 add<string | number>('', 1); 是对具有您定义的签名的函数的完全有效调用。扩展联合类型的类型并不意味着 "pick exactly one"。

由于您的签名有意义并且您正在学习泛型，所以我们想坚持下去，我们也可以在此时关闭类型检查。有时打字稿真的无法弄清楚你的复杂场景，你别无选择，只能return (x as any) + y此时放弃类型检查。

处理这种情况的另一种方法是使用如下所示的重载签名

function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x: any, y: any): any {
    return x + y;
}

const t1: string = add(10, 1); // Type 'number' is not assignable to type 'string'.
const t2: number = add(10, 1); // OK
const t3: string = add('10', '1'); // OK
const t4: number = add('10', 1); // Argument of type '"10"' is not assignable to parameter of type 'number'.

如何在 TypeScript 中制作适用于数字和字符串的通用加法运算符

How to make a generic add operator in TypeScript that works with numbers and strings

generics

type-inference

operators

type-constraints

typescript