Typescript（十三）泛型

阿新 • • 發佈：2021-05-26

泛型：[generic - 通用、泛指的意思],那最簡單的理解，泛型就是泛指的型別。

一：函式中的泛型

1：定義一個泛型方法

// 泛型
function query<T>(param:T)
{
    console.log(typeof param);
    console.log(param);
}
query<string>('sucess');
// 輸出：
// string
// sucess

從上邊的程式碼我們就可以看出，其實泛型這個很容易理解，就是我們在呼叫方法的時候傳參可能不知道要傳遞何種型別，那麼我們就在呼叫函式的時候傳遞引數型別。

2：泛型中陣列的使用

如果傳遞過來的值要求是數字，如何用泛型進行定義那?兩種方法，第一種是直接使用[]，第二種是使用Array<泛型>。形式不一樣，其他的都一樣。

程式碼如下：

function query1<T>(param:Array<T>)
{
    console.log(typeof param);
    console.log(param);
}
function query2<T>(param:T[])
{
    console.log(typeof param);
    console.log(param);
}
query1<string>(['sucess','error']);
// 輸出：
// object
// [ 'sucess', 'error' ]

3：多個泛型的定義

一個函式只能定義一個泛型嗎?當然不是，是可以定義多個的，這裡還是拿join方法舉例，定義多個泛型，比如第一個泛型用T,第二個用P代表。

程式碼如下：

function join<T, P>(first: T, second: P) 
{
  console.log(`${first}${second}`);
}
join < number, string > (1, "2");
// 輸出：12

4：型別推斷

泛型也是支援型別推斷的，比如下面的程式碼並沒有報錯，這就是型別推斷的功勞。

function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join(1, "2" 
);

但個人不建議大量使用型別推斷，這會讓你的程式碼易讀和健壯性都會下降

所以這個知識點，大家做一個瞭解就可以了。

二：類中的泛型

1：首先我們定義一個泛型類：

class selectGirl <T>{
    // 宣告一個私有變數陣列
    public lists:Array<T>;
    // 建構函式
    constructor(param:Array<T>)
    {
        this.lists = param;
        console.log(this.lists);
    }
}

呼叫一下：

let ass = new selectGirl<string>([
    "大腳", "劉英","小蒙"
]);
// 輸出：[ '大腳', '劉英', '小蒙' ]

這個就是在類中對泛型最簡單的使用。

2：泛型的繼承

現在我們需要獲取這個女孩子的名字，我們定義了一個新方法getName

class selectGirl <T>{
    // 宣告一個私有變數陣列
    public lists:Array<T>;
    // 建構函式
    constructor(param:Array<T>)
    {
        this.lists = param;
        console.log(this.lists);
    }
    /**
     * 獲取名字
     */
    public getName(num:number):string
    {
        let asd = this.lists[num];
        return asd;
      // 這樣寫會報錯，不能將型別“T”分配給型別“string”。
    }
}
 
let ass = new selectGirl<string>([
    "大腳", "劉英","小蒙"
]);
let res = ass.getName(1);

這樣寫會報錯，不能將型別“T”分配給型別“string”。

就是我們沒有辦法指定泛型中的值為string。

解決方法就使用到泛型的繼承，程式碼如下：

interface girl{
    name:string
}
class selectGirl <T extends girl>{
    // 宣告一個私有變數陣列
    public lists:Array<T>;
    // 建構函式
    constructor(param:Array<T>)
    {
        this.lists = param;
        console.log(this.lists);
    }
    /**
     * 獲取名字
     */
    public getName(num:number):string
    {
        let asd = this.lists[num].name;
        return asd;
    }
}
 
let result = new selectGirl<girl>([
    {name:"大腳"}, 
    {name:"劉英"},
    {name: "小蒙"}
]);
 
let res = result.getName(1);
console.log(res);
// 輸出：
//[ { name: '大腳' }, { name: '劉英' }, { name: '小蒙' } ]
// 劉英

三：泛型的約束

泛型的約束還是使用到extends關鍵字，我們還是使用到上邊的程式碼。不使用繼承，改成使用泛型的約束來實現上邊的功能。

class selectGirl <T extends string | number>{
    // 宣告一個私有變數陣列
    public lists:Array<T>;
    // 建構函式
    constructor(param:Array<T>)
    {
        this.lists = param;
        console.log(this.lists);
    }
    /**
     * 獲取名字
     */
    public getName(num:number):T
    {
        return this.lists[num];
    }
}
 
let result = new selectGirl<string>([
     '大腳', '劉英', '小蒙' 
]);
 
let res = result.getName(1);
console.log(res);
// 輸出：
// [ '大腳', '劉英', '小蒙' ]
// 劉英