Typescript中的泛型的作用及使用場景

什么是TypeScript

TypeScript是由Microsoft Corporation開發和維護的面向對象的編程語言。它是JavaScript的超集，包含所有元素。

TypeScript完全遵循OOPS概念，在TSC（TypeScript編譯器）的幫助下，我們可以將Typescript代碼（.ts文件）轉換為JavaScript（.js文件）。

為什么要使用TypeScript

TypeScript的設計目的應該是解決JavaScript的“痛點”：弱類型和沒有命名空間，導致很難模塊化，不適合開發大型程序。另外它還提供了一些語法糖來幫助大家更方便地實踐面向對象的編程。

• TypeScript簡化了JavaScript代碼，使其更易於閱讀和調試。

• TypeScript是開源的。

• TypeScript為JavaScript IDE和實踐提供了高效的開發工具，例如靜態檢查。

• 使用TypeScript，我們可以比普通的JavaScript做出巨大的改進。

• TypeScript為我們提供了ES6（ECMAScript 6）的所有優點，以及更高的工作效率。

• TypeScript可以幫助我們避免開發人員通過類型檢查代碼編寫JavaScript時經常遇到的痛苦錯誤。

• 強大的類型系統，包括泛型。

• TypeScript代碼可以按照ES5和ES6標准進行編譯，以支持最新的瀏覽器。

• 支持靜態類型。

• TypeScript將節省開發人員的時間。

什么是泛型

泛型的本質是參數化類型，通俗的將就是所操作的數據類型被指定為一個參數，這種參數類型可以用在類、接口和方法的創建中，分別成為泛型類，泛型接口、泛型方法。

TypeScript中的泛型跟java中的泛型基本類似。

為什么使用泛型

TypeScript 中不建議使用 any 類型，不能保證類型安全，調試時缺乏完整的信息。

TypeScript可以使用泛型來創建可重用的組件。支持當前數據類型，同時也能支持未來的數據類型。擴展靈活。可以在編譯時發現你的類型錯誤，從而保證了類型安全。

泛型的使用

使用泛型可以創建泛型函數、泛型接口，泛型類

1.使用泛型變量

// 泛型變量的使用
function identity<T>(arg:T):T{
    console.log(typeof arg);
    return arg;
}
let output1=identity<string>('myString');
let output2=identity('myString');
let output3:number=identity<number>(100);
let output4:number=identity(200);

// 使用集合的泛型
function loggingIdentity<T>(arg:Array<T>):Array<T>{
    console.log(arg.length);
    return arg;
}
loggingIdentity([1,2,3]);

2.定義泛型函數

// 泛型函數
function identity<T>(arg:T):T{
    return arg;
}
let myIdentity:{<T>(arg:T):T}=identity;

3.定義泛型接口

// 泛型接口
interface GenericIdentityFn<T> {
    (arg: T): T;
}
function identity<T>(arg: T): T {
    return arg;
}
let myIdentity: GenericIdentityFn<number> = identity;

4.定義泛型類

// 泛型類
class GenericNumber<T>{
    zeroValue:T;
    add:(x:T,y:T)=>T;
}
let myGenericNumber=new GenericNumber<number>();
myGenericNumber.zeroValue=0;
myGenericNumber.add=function(x,y){return x+y;};
console.info(myGenericNumber.add(2,5));
let stringNumberic=new GenericNumber<string>();
stringNumberic.zeroValue='abc';
stringNumberic.add=function(x,y){return `${x}--${y}`};
console.info(stringNumberic.add('張三豐','諸葛亮'));

---

經典前端面試題每日更新，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公眾號——全棧弄潮兒。