templates - typescript :如何表达类型被限制为几种类型之一的通用函数

Question

例如，如果一个方法添加两个参数 a 和 b，它们应该属于同一类型，并且该类型应该是字符串或数字。

尝试 1:

function add(a: string | number, b: string | number) { 
    return a + b; 
}

这行不通，因为 a 和 b 的类型可能不匹配；所以产生的错误是有道理的:error TS2365: Operator '+' cannot be applied to types 'string |数字'和'字符串|数'。

尝试 2:

function add<T extends string | number>(a: T, b: T) {
    return a + b;
}

这将返回相同的错误代码:error TS2365: Operator '+' cannot be applied to types 'T' and 'T'。

尝试 3:

function add(a: string, b: string): string;
function add(a: number, b: number): number;
function add(a: any, b: any) {
    return a + b;
}

这个(函数重载)工作正常，但看起来有点矫枉过正。有没有更优雅的表达方式？

Answer 1

您还可以像这样组合您的尝试 2 和 3:

function add<T extends string | number>(a: T, b: T): T;
function add(a: any, b: any) {
    return a + b;
}

然后你可以像这样使用它:

// Return type is `number`
add(1, 2);
// Return type is `string`
add('1', '2');
add<number>(1, 2);
add<string>('1', '2');

...这些会导致预期的类型错误:

add(1, '2');
add<number>('1', '2');
add<string>(1, 2);
add(true, false);

但是，如果您不打算使用输入类型，那么我会坚持只使用函数重载。我认为最容易理解。