typescript 泛型学习

function func(arg: any): any {
    return arg
}
const result: string = func(123)

如上所示，func中输入输入arg可以是任意类型，返回也是任意类型，但是无法做到在调用函数时，我希望返回一个string类型，而我实际输入是number类型，按照函数方法直接返回依然是number类型，但是在ts文件中不会报错。

因此引入泛型概念，在函数名后面通过添加<T>来设置一个类型，并将参数和返回值都设置此参数，达到返回值和输入参数是一个类型的目的。

function func<T>(arg: T): T {
    return arg
}
const result: string = func(123)

此处result报错：不能将类型“number”分配给类型“string”。

 

类型推断：result通过类型推断变成number类型

function func<T>(arg: T): T {
    return arg
}
const result = func(123)

 

泛型运用

function func<T>(arg: T): T {
    return arg
}
const result = func(123)

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]]
}
const result2 = swap(['string', 123])
// 返回[123,'string']

 

约束泛型

function echoWithArray<T>(arg: T):T {
    console.log(arg.length)
    return arg
}

上述代码length处报错：类型“T”上不存在属性“length”。

 

function echoWithArray<T>(arg: T[]):T[] {
    console.log(arg.length)
    return arg
}

或者通过extends继承属性方法，先通过interface申明一个接口，在通过extends使T继承属性，const str、obj、arr都不会报错，并且会类型推断

interface IWithLength {
    length: number
}
function echoWithLength<T extends IWithLength>(arg: T): T {
    console.log(arg.length)
    return arg
}
const str = echoWithLength('str')
const obj = echoWithLength({ length: 10 })
const arr = echoWithLength([1, 2, 3])

 

泛型在类和接口中的使用

class Queue {
    private data = []
    push(item) {
        return this.data.push(item)
    }
    pop() {
        return this.data.shift()
    }
}
const queue = new Queue()
queue.push(123)
queue.push('string')
console.log(queue.pop().toFixed)
console.log(queue.pop().toFixed)

上述代码中ts内不会报错，但是实际上在第二个toFixed中是一个string类型，而toFixed是数字的方法，所以在实际运行中会报错，

class Queue {
    private data = []
    push(item: number) {
        return this.data.push(item)
    }
    pop() {
        return this.data.shift()
    }
}
const queue = new Queue()
queue.push(123)
queue.push('string')
console.log(queue.pop().toFixed)
console.log(queue.pop().toFixed)

当push规定好item类型后，此时上述代码中string处会报错：类型“string”的参数不能赋给类型“number”的参数。

而在实际运用中只规定item这一种类型并不符合实际，所以采用泛型，创建一个泛型类，在Queue后面加<T>

class Queue<T> {
    private data = []
    push(item: T) {
        return this.data.push(item)
    }
    pop(): T {
        return this.data.shift()
    }
}
const queue = new Queue<number>()
queue.push(123)
queue.push('string')
console.log(queue.pop().toFixed)
console.log(queue.pop().toFixed)

此时上述代码中string处报错：类型“string”的参数不能赋给类型“number”的参数。

泛型在接口中的使用

interface keyPair<T, U> {
    key: T,
    value: U
}
let ky1: keyPair<number, string> = { key: 1, value: 'string' }
let ky2: keyPair<string, number> = { key: 'str', value: 2 }
let arr1: number[] = [1,2,3]
let arr2: Array<number> = [1,2,3]