泛型的意義及語法

定義一個函數(shù)或類時，有些情況下無法確定其中要使用的具體類型（返回值、參數(shù)、屬性的類型不能確定），此時泛型便能夠發(fā)揮作用。

• 舉個例子：

  • function test(arg: any): any{
    	return arg;
    }
    

  • 上例中，test函數(shù)有一個參數(shù)類型不確定，但是能確定的時其返回值的類型和參數(shù)的類型是相同的，由于類型不確定所以參數(shù)和返回值均使用了any，但是很明顯這樣做是不合適的，首先使用any會關(guān)閉TS的類型檢查，其次這樣設(shè)置也不能體現(xiàn)出參數(shù)和返回值是相同的類型

  • 使用泛型：

  • function test<T>(arg: T): T{
    	return arg;
    }
    

  • 這里的<T>就是泛型，T是我們給這個類型起的名字（不一定非叫T），設(shè)置泛型后即可在函數(shù)中使用T來表示該類型。所以泛型其實很好理解，就表示某個類型。

  • 那么如何使用上邊的函數(shù)呢？

    • 方式一（直接使用）：

      • test(10)
        

      • 使用時可以直接傳遞參數(shù)使用，類型會由TS自動推斷出來，但有時編譯器無法自動推斷時還需要使用下面的方式

    • 方式二（指定類型）：

      • test<number>(10)
        

      • 也可以在函數(shù)后手動指定泛型

  • 可以同時指定多個泛型，泛型間使用逗號隔開：

    • function test<T, K>(a: T, b: K): K{
          return b;
      }
      
      test<number, string>(10, "hello");
      

    • 使用泛型時，完全可以將泛型當成是一個普通的類去使用

  • 類中同樣可以使用泛型：

    • class MyClass<T>{
          prop: T;
      
          constructor(prop: T){
              this.prop = prop;
          }
      }
      

  • 除此之外，也可以對泛型的范圍進行約束

    • interface MyInter{
          length: number;
      }
      
      function test<T extends MyInter>(arg: T): number{
          return arg.length;
      }
      

    • 使用T extends MyInter表示泛型T必須是MyInter的子類，不一定非要使用接口類和抽象類同樣適用。

復雜例子：可擴展的數(shù)據(jù)結(jié)構(gòu)

現(xiàn)在讓我們看一個更復雜的例子，使用泛型創(chuàng)建一個可擴展的數(shù)據(jù)結(jié)構(gòu)。假設(shè)我們要實現(xiàn)一個Stack（棧）數(shù)據(jù)結(jié)構(gòu)，它可以存儲不同類型的元素。下面是使用泛型實現(xiàn)的Stack類：

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }

  isEmpty(): boolean {
    return this.items.length === 0;
  }
}

// 使用泛型類
const stack = new Stack<number>();
stack.push(1);
stack.push(2);
stack.push(3);

while (!stack.isEmpty()) {
  console.log(stack.pop()); // 輸出：3, 2, 1
}

在上面的例子中，我們使用泛型類Stack來創(chuàng)建一個可以存儲不同類型元素的棧。通過使用泛型，我們可以在創(chuàng)建Stack實例時指定具體的元素類型。這使得我們可以在同一個棧中存儲不同類型的數(shù)據(jù)，并保持類型安全。

例子出處文章來源地址http://www.zghlxwxcb.cn/news/detail-705446.html

到了這里，關(guān)于【TypeScript】TypeScript中的泛型的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！