如何在箭头函数中使用打字稿泛型添加两个参数

Question

例如，我在扩展.tsx file有这段代码

const Add = <T,>(arg0: T, arg1: T): T => arg0 + arg1;
const A = Add(1, 2);
const B = Add('1', '2')

我的问题是有一个错误说：

Operator '+' cannot be applied to types 'T' and 'T'.ts(2365)

有没有关于如何在泛型的箭头函数中使用它的解决方法？

Answer 1

首先，您要将泛型限制为您实际打算与+运算符一起使用的东西; 大概是string或number。 然后，这仍然会失败，因为编译器将不愿意添加string | number。 更糟糕的是，约束泛型参数以扩展string | number将导致编译器将输入解释为字符串文本或数字文本类型，并且您不希望1 | 2返回类型的Add(1, 2)。

最简单的解决方法是对返回使用类型断言和条件类型，这会将结果扩大到string、number或string | number：

const Add = <T extends string | number>(
arg0: T, arg1: T
): T extends string ? string : number => arg0 as any + arg1;
const A = Add(1, 2); // number
const B = Add('1', '2') // string
Add(1, "2"); // compile error
Add("1", 2); // compile error
const C = Add(Math.random() < 0.5 ? 1 : "1", Math.random() < 0.5 ? 2 : "2"); // string | number

好的，希望有帮助;祝你好运！

操场链接到代码

Answer 2

interface IAdd {
(a: number, b: number): number
(a: string, b: string): string
}
const Add: IAdd = (a: any, b: any) => a + b;
Add(1, 1);
Add("1", "2");