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

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)

是否有关于如何在带有泛型的Arrow 函数中使用它的解决方法？

Answer 1

好吧，首先你想把你的泛型限制在你真正打算用+操作符使用的东西上； 大概是string或number 。 然后，这仍然会失败，因为编译器会拒绝添加string | number string | number 。 更糟糕的是，限制泛型参数以扩展string | number string | number将导致编译器将输入解释为字符串文字或数字文字类型，并且您不希望Add(1, 2)的返回类型为1 | 2 1 | 2 .

最简单的解决方法是对返回值使用类型断言和条件类型，这会将结果扩展为string 、 number或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

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

Playground 链接到代码

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");