如何在箭頭函數中使用 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");