TypeScript泛型工作原理詳解
什么是泛型？
TypeScript 中的泛型允許編寫可處理各種數據類型的代碼，同時保持類型安全。它們允許在不犧牲類型檢查的情況下創(chuàng)建可重用的組件、函數和數據結構。
泛型由類型參數表示，這些參數充當類型的占位符。這些參數在尖括號 （ <> ） 中指定，可以在整個代碼中用于定義變量類型、函數參數、返回類型等。
TypeScript 泛型用例
泛型的基本用法
讓我們從泛型函數的簡單示例開始：
function identity<T>(arg: T): T {
return arg;
}
const output = identity<string>("hello");
console.log(output); // hello
在此示例中， identity 是一個采用類型參數的泛型函數 T 。參數 arg 的類型為 T ，函數的返回類型也是 T 。調用 identity<string>("hello") 時，類型參數 T 推斷為 string ，確保類型安全。
如何使用泛型類
泛型不僅限于函數，它們還可以與類一起使用。請考慮以下泛型 Box 類示例：
class Box<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
}
const box = new Box<number>(42);
console.log(box.getValue()); // 42
這里， Box 是一個帶有類型參數的泛型類 T 。構造函數采用 type 的值，該 getValue 方法返回 type T T 的值。創(chuàng)建 的實例時 Box ，它只能存儲和返回 類型的 number 值。
如何對泛型應用約束
有時，您可能希望限制可用于泛型的類型。TypeScript 允許您使用 extends 關鍵字指定對類型參數的約束。讓我們看一個例子
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
const result = loggingIdentity("hello");
console.log(result); // Output: hello
在此示例中，該 loggingIdentity 函數采用一個類型參數， T 該參數必須擴展 Lengthwise 接口，從而確保具有 arg length 屬性。此約束允許在不導致編譯錯誤的情況下訪問 length 該屬性。
如何將泛型與接口一起使用
泛型還可以與接口一起使用，以創(chuàng)建靈活且可重用的定義。請看以下示例：
interface Pair<T, U> {
first: T;
second: U;
}
let pair: Pair<number, string> = { first: 1, second: "two" };
console.log(pair); // Output: { first: 1, second: "two" }
這里， Pair 是一個具有兩個類型參數 T 和 的接口，分別表示 first 和 second U 屬性的類型。聲明 pair 為 Pair<number, string> 時，它強制要求屬性必須是數字，并且 first second 屬性必須是字符串。
如何將泛型函數與數組一起使用
function reverse<T>(array: T[]): T[] {
return array.reverse();
}
let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers: number[] = reverse(numbers);
console.log(reversedNumbers); // Output: [5, 4, 3, 2, 1]
在此示例中，該 reverse 函數采用 type T 的數組，并返回相同類型的反向數組。通過使用泛型，該函數可以處理任何類型的數組，從而確保類型安全。
如何將泛型約束與 keyof
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
let person = { name: "John", age: 30, city: "New York" };
let age: number = getProperty(person, "age");
console.log(age); // Output: 30
在這里，該 getProperty 函數接受一個 type 的對象和一個 type T K 的鍵，其中 K 擴展了 T 的鍵。然后，它從對象返回相應的屬性值。此示例演示如何在訪問對象屬性時使用泛型 keyof 來強制實施類型安全性。
如何使用泛型實用程序函數
function toArray<T>(value: T): T[] {
return [value];
}
let numberArray: number[] = toArray(42);
console.log(numberArray); // Output: [42]
let stringArray: string[] = toArray("hello");
console.log(stringArray); // Output: ["hello"]
該函數將類型的 T 單個值轉換為包含該 toArray 值的數組。這個簡單的實用函數展示了如何使用泛型來創(chuàng)建可重用的代碼，這些代碼可以毫不費力地適應不同的數據類型。
如何將泛型接口與函數一起使用
interface Transformer<T, U> {
(input: T): U;
}
function uppercase(input: string): string {
return input.toUpperCase();
}
let transform: Transformer<string, string> = uppercase;
console.log(transform("hello")); // Output: HELLO
在此示例中，我們定義了一個 Transformer 接口，其中包含兩個類型參數 T 和 U ，分別表示輸入和輸出類型。然后，我們聲明一個函數 uppercase 并將其分配給 類型的 Transformer<string, string> 變量 transform 。這演示了如何使用泛型來定義函數的靈活接口。
總結
無論是函數、類還是接口，泛型都為構建可伸縮和可維護的 TypeScript 應用程序提供了可靠的機制。理解和掌握泛型可以顯著提高您編寫高效且無錯誤的代碼的能力。
以上就是TypeScript泛型工作原理詳解的詳細內容，更多關于TypeScript泛型的資料請關注腳本之家其它相關文章！
相關文章
# 包含了一個位置信息，默認的錨點是＃top 也就是網頁的上端，而javascript:void(0) 僅表示一個死鏈接。2010-08-08
這篇文章主要為大家介紹了一道關于JavaScript變量作用域的面試題，如何解決這道面試題，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了javascript常用函數，15個常用函數，都具有很高的實用性，感興趣的小伙伴們可以參考一下2015-11-11
最少知識原則（LKP）說的是一個軟件實體應當盡可能少地與其他實體發(fā)生相互作用。這里的軟件實體是一個廣義的概念，不僅包括對象，還包括系統(tǒng)、類、模塊、函數、變量等2022-08-08
這篇文章主要介紹了在實例中重學JavaScript事件循環(huán)，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-12-12![在chrome瀏覽器中，防止input[text]和textarea在聚焦時出現黃色邊框的解決方法](http://img.jbzj.com/images/xgimg/bcimg5.png)
在chrome瀏覽器中，防止input[text]和textarea在聚焦時出現黃色邊框的解決方法
chrome瀏覽器不管對于開發(fā)者還是一般用戶都可以說是一個相當優(yōu)秀的網頁瀏覽器，但是在開發(fā)中，讓人感覺很多余的一個特性就是，在表單項中的控件聚焦時總會出現一個黃色邊框2011-05-05
在學習typescript的過程中發(fā)現在vscode上不能很好地的輸出typescript的運行結果,需要先將typescript編譯為javascript,在通過node執(zhí)行js文件得到結果,這篇文章給大家介紹如何在vscode上直接運行typescript,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了JS實現單張或多張圖片持續(xù)無縫滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了淺析javascript中的事件代理，由一道面試題講起，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要給大家介紹了關于JavaScript中引用vs復制的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12