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

Question

For example I have this code in .tsx file extension

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

My problem is that there's an error saying:

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

Is there a workaround on how to use it in Arrow function with Generics ?

Answer 1

Well, first you want to constrain your generics to things you actually intend to use with the + operator; presumably string or number . Then, this will still fail, because the compiler will balk at adding string | number string | number . Worse, constraining a generic parameter to extend string | number string | number will cause the compiler to interpret the input as a either a string literal or a numeric literal type, and you do not want the return type of Add(1, 2) to be 1 | 2 1 | 2 .

The easiest workaround is to use a type assertion and a conditional type for the return, which widens the result to either string , number , or 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

Okay, hope that helps; good luck!

Playground link to code

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