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

時間 2019-11-06

標籤 typescript 使用場景简体版

原文原文鏈接

什麼是TypeScript

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

TypeScript徹底遵循OOPS概念，在TSC（TypeScript編譯器）的幫助下，咱們能夠將Typescript代碼（.ts文件）轉換爲JavaScript（.js文件）。vue

爲何要使用TypeScript

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

TypeScript簡化了JavaScript代碼，使其更易於閱讀和調試。node
TypeScript是開源的。react
TypeScript爲JavaScript IDE和實踐提供了高效的開發工具，例如靜態檢查。git
使用TypeScript，咱們能夠比普通的JavaScript作出巨大的改進。github
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('張三丰','諸葛亮'));
複製代碼