前端深入理解Typescript泛型概念

首先介紹一下泛性的概念

泛型程序設計（generic programming）是程序設計語言的一種風格或范式。泛型允許程序員在強類型程序設計語言中編寫代碼時使用一些以后才指定的類型，在實例化時作為參數指明這些類型。

泛型是指在定義函數，接口或者類的時候，不預先定義好具體的類型，而在使用的時候在指定類型的一種特性。

先舉一個簡單的例子

假設我們定義一個函數，它可以接收一個number類型做為參數，并且返回一個number類型。

function genericDemo(data: number): number {
  return data;
}

按照以上的寫法是沒有問題的，但是如果我們要接受一個string并返回一個string呢？如果邏輯一樣還要在寫一遍嗎？就像下面這樣。

function genericDemo(data: string): string {  
  return data;
}

這顯然代碼是很冗余的，我們還有不使用any的寫法嗎？答案是顯然易見的，可以使用范型的寫法，就像下面這樣。

function genericDemo<T>(data: T):T {
  return data;
}

我們在函數名稱genericDemo后面聲明了范型變量<T>，他用于捕獲調用該函數時傳入的參數類型(例如：number)，之后我們就可以使用這個類型。 之后我們再次使用了T當做返回值類型。現在我們可以知道參數類型與返回值類型是相同的了。這允許我們跟蹤函數里使用的類型的信息。

多個類型參數

我們在定義范型的時候，也可以一次定義多個類型參數，像下面這樣。

function swap<T, U>(tuple: [T, U]):[U, T] {
  return [tuple[1], tuple[0]];
}

泛型接口

我們先定義一個范型接口Identities,然后定義一個函數identities()來使用這個范型接口

interface Identities<T, U> {
  id1: T;
  id2: U;
}

我在這里使用T和U作為我們的類型變量來演示任何字母(或有效的字母數字名稱的組合)都是有效的類型—除了常規用途之外，您對它們的調用沒有任何意義。

我們現在可以將這個接口應用為identity()的返回類型，修改我們的返回類型以符合它。我們還可以console.log這些參數和它們的類型，以便進一步說明:

function identities<T, U> (arg1: T, arg2: U): Identities<T, U> {
  console.log(arg1 + ": " + typeof (arg1));
  console.log(arg2 + ": " + typeof (arg2));
  let identities: Identities<T, U> = {
  id1: arg1,
  id2: arg2
 };
 return identities;
}

我們現在對identity()所做的是將類型T和U傳遞到函數和identity接口中，從而允許我們定義與參數類型相關的返回類型。

范型變量

使用泛型創建像identity這樣的泛型函數時，編譯器要求你在函數體必須正確的使用這個通用的類型。 換句話說，你必須把這些參數當做是任意或所有類型。

我們先看下之前例子

function genericDemo<T>(data: T):T {
  return data;
}

如果我們想同時打印出data的長度。 我們很可能會這樣做

function genericDemo<T>(data: T):T {
  console.log(data.length); // Error: T doesn't have .length
  return data;
}

如果這么做，編譯器會報錯說我們使用了data的.length屬性，但是沒有地方指明data具有這個屬性。 記住，這些類型變量代表的是任意類型，所以使用這個函數的人可能傳入的是個數字，而數字是沒有.length屬性的。

現在假設我們想操作T類型的數組而不直接是T。由于我們操作的是數組，所以.length屬性是應該存在的。 我們可以像創建其它數組一樣創建這個數組：

function genericDemo<T>(data: Array<T>):Array<T> {
  console.log(data.length);
  return data;
}

范型類

我們還可以在類屬性和方法的意義上使類泛型。泛型類確保在整個類中一致地使用指定的數據類型。例如下面這種在React Typescript項目中的寫法。

interface Props {
  className?: string;
  ...
}

interface State {
  submitted?: bool;
  ...
}

class MyComponent extends React.Component<Props, State> {
  ...
}

我們在這里使用與React組件一起使用的泛型，以確保組件的props和state是類型安全的。

泛型約束

我們先看一個常見的需求，我們要設計一個函數，這個函數接受兩個參數，一個參數為對象，另一個參數為對象上的屬性，我們通過這兩個參數返回這個屬性的值，比如：

function getValue(obj: object, key: string){
  return obj[key] // error
}

我們會得到一段報錯，這是新手 TypeScript 開發者常常犯的錯誤，編譯器告訴我們，參數 obj 實際上是 {},因此后面的 key 是無法在上面取到任何值的。

因為我們給參數 obj 定義的類型就是 object，在默認情況下它只能是 {}，但是我們接受的對象是各種各樣的，我們需要一個泛型來表示傳入的對象類型，比如T extends object:

function getValue<T extends object>(obj: T, key: string) {
 return obj[key] // error
}

這依然解決不了問題，因為我們第二個參數 key 是不是存在于 obj 上是無法確定的，因此我們需要對這個 key 也進行約束，我們把它約束為只存在于 obj 屬性的類型，這個時候需要借助到后面我們會進行學習的索引類型進行實現 <U extends keyof T>，我們用索引類型 keyof T 把傳入的對象的屬性類型取出生成一個聯合類型，這里的泛型 U 被約束在這個聯合類型中，這樣一來函數就被完整定義了：

function getValue<T extends object, U extends keyof T>(obj: T, key: U) {
 return obj[key] // ok
}

另外提一個多重泛型約束的寫法，可以當作拓展：

interface firstInterface {
  first(): number
}

interface secondInterface {
  second(): string
}

class Demo<T extends firstInterface & secondInterface >{
  ...
}

在泛型里使用類類型

在TypeScript使用泛型創建工廠函數時，需要引用構造函數的類類型。比如:

function create<T>(type: {new(): T; }): T {
  return new type();
}

參數type的類型{new(): T}就表示此泛型T是可被構造的，在被實例化后的類型是泛型 T。

總結

到此這篇關于前端深入理解Typescript泛型概念的文章就介紹到這了,更多相關Typescript 泛型內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！