泛型

指在定義函數(shù)、接口或類的時(shí)候，不預(yù)先指定具體的類型，而在使用的時(shí)候再指定具體類型的一種特性。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括廣州網(wǎng)站建設(shè)、廣州網(wǎng)站制作、廣州網(wǎng)頁制作以及廣州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，廣州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到廣州省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

引入

下面創(chuàng)建一個(gè)函數(shù), 實(shí)現(xiàn)功能: 根據(jù)指定的數(shù)量 count 和數(shù)據(jù) value , 創(chuàng)建一個(gè)包含 count 個(gè) value 的數(shù)組 不用泛型的話，這個(gè)函數(shù)可能是下面這樣：

function createArray(value: any, count: number): any[] {
    const arr: any[] = []
    for (let index=0; index < count; index++) {
        arr.push(value)
    }
    return arr
}

const arr1 = createArray('a', 3)
const arr2 = createArray(1, 3)
console.log(arr1)
console.log(arr2)
console.log(arr1[0].toFixed(), arr2[0].split(''))

我們創(chuàng)建了一個(gè)函數(shù)createArray，傳入2個(gè)參數(shù)value和count，返回any類型的數(shù)組，然后定義了一個(gè)any類型的空數(shù)組arr。接下來我們查看結(jié)果

在編譯階段我們沒有報(bào)錯(cuò)是因?yàn)?，我們把value設(shè)置為了any類型，但是當(dāng)編譯完成后運(yùn)行時(shí)，arr1是字符串，字符串是沒有toFixed方法的，所以會(huì)報(bào)錯(cuò)，那么我們希望在編譯階段就報(bào)錯(cuò)，就可以使用泛型

使用泛型

// 使用函數(shù)泛型
function createArray(value: T, count: number): T[] {
    const arr: Array = []
    for (let index=0; index < count; index++) {
        arr.push(value)
    }
    return arr
}
const arr1 = createArray(11, 3)
console.log(arr1[0].toFixed())
const arr2 = createArray('AA', 3)
console.log(arr2[0].split(''))
console.log('---------')
console.log(arr2[0].toFixed())  // 報(bào)錯(cuò)，因?yàn)樽址疀]有toFixed方法
console.log(arr1[0].split(''))  // 報(bào)錯(cuò)，因?yàn)閚umber沒有split方法

泛型的意思就是類型由用戶自己決定，比如function createArray(value: T, count: number): T[]，函數(shù)createArray和value參數(shù)和返回類型都由用戶自己決定。
const arr1 = createArray(11, 3)這句代碼是沒問題，因?yàn)橐?guī)定了number類型，傳入的也是number

當(dāng)我們將代碼修改成如下代碼：

我們發(fā)現(xiàn)報(bào)錯(cuò)了，因?yàn)橐?guī)定了number類型，傳入的卻是字符串11，

當(dāng)我們輸入如下代碼，也會(huì)報(bào)錯(cuò)

報(bào)錯(cuò)原因如下

所以如果我們使用了泛型，就會(huì)避免類型輸入錯(cuò)誤或者用錯(cuò)方法

多個(gè)泛型參數(shù)的函數(shù)

一個(gè)函數(shù)可以定義多個(gè)泛型參數(shù)

function swap  (a: K, b: V): [K, V] {
  return [a, b]
}
const result = swap('abc', 123)
console.log(result[0].length, result[1].toFixed())

泛型接口

interface IbaseCRUD  {
    // 定義泛型數(shù)組data
    data: T[]
    add: (t: T) => void
    getById: (id: number) => T
}

class User {
    id?: number;
    name: string;
    age: number;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

class UserCRUD implements IbaseCRUD {
    data: User[] = []

    add(user: User): void {
        user = {...user, id: Date.now()}
        this.data.push(user)
        console.log('保存user', user.id)
    }

    getById(id: number): User {
        return this.data.find(item => item.id === id)
    }
}


const userCRUD = new UserCRUD()
userCRUD.add(new User('tom', 12))
userCRUD.add(new User('tom2', 13))
console.log(userCRUD.data)

泛型類

泛型類看上去與泛型接口差不多。 泛型類使用（ <>）括起泛型類型，跟在類名后面。

class GenericNumber {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

GenericNumber類的使用是十分直觀的，并且你可能已經(jīng)注意到了，沒有什么去限制它只能使用number類型。 也可以使用字符串或其它更復(fù)雜的類型。

let stringNumeric = new GenericNumber();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };

console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));

與接口一樣，直接把泛型類型放在類后面，可以幫助我們確認(rèn)類的所有屬性都在使用相同的類型。

泛型約束

如果我們直接對一個(gè)泛型參數(shù)取 length 屬性, 會(huì)報(bào)錯(cuò), 因?yàn)檫@個(gè)泛型根本就不知道它有這個(gè)屬性

// 沒有泛型約束
function fn (x: T): void {
  console.log(x.length)  // 報(bào)錯(cuò)，因?yàn)槟壳安恢纗是什么類型
}

我們可以使用泛型約束來實(shí)現(xiàn)

interface Lengthwise {
  length: number;
}

// 指定泛型約束
function fn2 (x: T): void {
  console.log(x.length)
}

我們需要傳入符合約束類型的值，必須包含必須 length 屬性：

fn2('abc')
// fn2(123) // error  number沒有l(wèi)ength屬性