柚子快報(bào)激活碼778899分享：TypeScript——泛型

http://yzkb.51969.com/

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

函數(shù)泛型

本來函數(shù)參數(shù)類型的不同時(shí)，要寫多個(gè)，現(xiàn)在用泛型，只需要使用時(shí)傳參即可

單個(gè)類型參數(shù)

function str(a: string, b: string): Array {

return [a, b]

}

function num(a: number, b: number): Array {

return [a, b]

}

str('1', '2')

num(1, 2)

function fn(a: T, b: T): Array {

return [a, b]

}

fn(1,2)

fn('1','2')

多個(gè)類型參數(shù)

function fn(a: T, b: U): Array {

return [a, b]

}

fn(1, true)

fn('1', '2')

類型別名泛型

type A = string | number | T

let a: A = true

let a1: A = undefined

泛型接口

interface Person {

name: T

age: U

}

let p: Person = {

name: 'zs',

age: 18,

}

泛型約束

在函數(shù)內(nèi)部使用泛型變量的時(shí)候，由于事先不知道它是哪種類型，所以不能隨意的操作它的屬性或方法

function fn(a: T) {

console.log(a.length)

// error TS2339: Property 'length' does not exist on type 'T'

}

fn('111')

fn([1, 2, 3])

這時(shí)，我們可以對(duì)泛型進(jìn)行約束，只允許這個(gè)函數(shù)傳入那些包含 length 屬性的變量。這就是泛型約束

interface Len {

length: number

}

function fn(a: T) {

console.log(a.length)

}

fn('111')

fn([1, 2, 3])

使用keyof約束對(duì)象

其中使用了TS泛型和泛型約束。首先定義了T類型并使用extends關(guān)鍵字繼承object類型的子類型，然后使用keyof操作符獲取T類型的所有鍵，它的返回類型是聯(lián)合類型，最后利用extends關(guān)鍵字約束 K類型必須為keyof T聯(lián)合類型的子類型

let person = {

name: 'zs',

age: 18,

}

function fn(obj: T, key: K) {

console.log(obj[key])

// error TS2536: Type 'K' cannot be used to index type 'T'

}

let person = {

name: 'zs',

age: 18,

}

function fn(obj: T, key: K) {

console.log(obj[key])

}

fn(person, 'name') // zs

fn(person, 'age') // 18

高階用法

interface Data {

name: string

age: number

sex: string

}

type Options = {

[key in keyof T]?: T[key]

}

type B = Options

泛型類

聲明方法跟函數(shù)類似名稱后面定義<類型>

class Sub {

attr: T[] = []

add(a: T): T[] {

return [a]

}

}

let s = new Sub()

s.attr = [1, 2, 3]

console.log(s.add(123)) // [123]

let str = new Sub()

str.attr = ['1', '2', '3']

console.log(str.add('123')) // ['123']

柚子快報(bào)激活碼778899分享：TypeScript——泛型

http://yzkb.51969.com/

參考閱讀