天天看點

TypeScript 的 generic 函數

官方連結

編寫一個函數,其中輸入的類型與輸出的類型相關,或者兩個輸入的類型以某種方式相關。 讓我們考慮一個傳回數組第一個元素的函數:

function firstElement(arr: any[]) {
  return arr[0];
}
      

這個函數完成了它的工作,但不幸的是傳回類型為 any。 如果函數傳回數組元素的類型會更好。

在 TypeScript 中,當我們想要描述兩個值之間的對應關系時,會使用泛型。 我們通過在函數簽名中聲明一個類型參數來做到這一點:

function firstElement<T>(arr: T[]): T {
  return arr[0];
}

const arr: string[] = ['1', '2', '3'];

const result = firstElement(arr);

console.log(result);

const result1:number = firstElement(arr);

      
TypeScript 的 generic 函數

TypeScript 的類型推斷 - Type inference

function map<Input, Output>(arr: Input[], func: (arg: Input) => Output): Output[] {
  return arr.map(func);
}

      

注意,上面代碼的 Inout,Output 可以被 T, V 替代,但是可讀性不如前者。

TypeScript 的 generic 函數

Type constrains - 類型限制

我們已經編寫了一些可以處理任何類型值的通用函數。 有時我們想關聯兩個值,但隻能對某個值的子集進行操作。 在這種情況下,我們可以使用限制來限制類型參數可以接受的類型種類。

讓我們編寫一個函數,傳回兩個值中較長的一個。 為此,我們需要一個長度屬性,它是一個數字。 我們通過編寫 extends 子句将類型參數限制為該類型:

function longest<Type extends { length: number }>(a: Type, b: Type) {
  if (a.length >= b.length) {
    return a;
  } else {
    return b;
  }
}

// longerArray is of type 'number[]'
const longerArray = longest([1, 2], [1, 2, 3]);
console.log(longerArray);

// longerString is of type 'string'
const longerString = longest("alice", "bob");
console.log(longerString);

// Error! Numbers don't have a 'length' property
const notOK = longest(10, 100);
      

最後一個函數調用會出現編譯錯誤,因為 TypeScript 基本類型 number 并不存在名稱為 length 的屬性。

同 Java 相比,TypeScript 的類型限制的強大之處在于,extends 後面緊跟的不需要是 TypeScript 的 built-in type,比如本例裡的:

{
length: number
}
      

意思是,隻要該函數傳入的類型,至少包含類型為 number 的 length 屬性即可。

Specifying Type Arguments

TypeScript 通常可以在泛型調用中推斷出預期的類型參數,但并非總是如此。 例如,假設您編寫了一個函數來組合兩個數組:

function combine<Type>(arr1: Type[], arr2: Type[]): Type[] {
  return arr1.concat(arr2);
}
      

編譯錯誤:

TypeScript 的 generic 函數

解決辦法:使用尖括号文法,顯式傳入類型參數:這裡 T = string | number,意思是接收 string 或者 number 類型均可。

TypeScript 的 generic 函數

編寫 generic 函數的最佳實踐

編寫泛型函數很有趣,而且很容易被類型參數沖昏頭腦。 有太多類型參數或在不需要它們的地方使用限制會使推理不那麼成功,使函數的調用者感到沮喪。

最佳實踐1 - Push Type Parameters Down

function firstElement1<Type>(arr: Type[]) {
  return arr[0];
}

function firstElement2<Type extends any[]>(arr: Type) {
  return arr[0];
}

// a: number (good)
const a = firstElement1([1, 2, 3]);
// b: any (bad)
const b = firstElement2([1, 2, 3]);
      

乍一看,兩種方法似乎相同,但 firstElement1 是編寫此函數的更好方法。 它的推斷傳回類型是 Type,但 firstElement2 的推斷傳回類型是 any,因為 TypeScript 必須使用限制類型解析 arr[0] 表達式,而不是在調用期間“等待”解析元素。

最佳實踐 2- Use Fewer Type Parameters

function filter1(arr: Type[], func: (arg: Type) => boolean): Type[] {

 return arr.filter(func);

}

function filter2 boolean>(

 arr: Type[],

 func: Func

): Type[] {

1

2

3

4

5

6

7

8

9

10

我們建立了一個不關聯兩個值的類型參數 Func。 這總是一個危險信号,因為這意味着想要指定類型參數的調用者必須無緣無故地手動指定一個額外的類型參數。 Func 不會做任何事情,隻會讓函數更難閱讀和推理!

最佳實踐3 - Type Parameters Should Appear Twice

function greet(s: Str) {

 console.log("Hello, " + s);

greet("world");

這個例子裡, Str 隻出現了一次,是以根本毫無必要。

可以簡寫成:

function greet(s: string) {