TypeScript中的泛型（第三部分：泛型类、泛型接口）

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

泛型类

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

先看示例:

class Queue {
    private data = [];
    push (item) {
        return this.data.push(item)
    }

    pop () {
        return this.data.shift()
    }

}
const queue = new Queue()
queue.push(1)
queue.push("str")
console.log(queue.pop().toFixed());
console.log(queue.pop().toFixed());

然后我们进行以下操作:

1. 先编译以上示例代码
2. 然后运行编译好的JavaScript文件
3. 再然后我们就得到了下图的报错

在这里有的小伙伴会好奇为什么我们在TypeScript中没有抓到我们的错误呢,首先呢它允许我们向队列中添加任何类型数据,当然类型数据被弹出队列也可以是任意类型的,在上例中我们添加了字符串类型数据,那么在使用中就会弹出字符串类型的数据,而我们又在后面使用了只有数字类型才有的方法 解决方法:

class Queue {
    private data = [];
    push (item:number) {
        return this.data.push(item)
    }

    pop () {
        return this.data.shift()
    }

}
const queue = new Queue()
queue.push(1)
queue.push("str")
console.log(queue.pop().toFixed());
console.log(queue.pop().toFixed());

那么在这里str就会报错:

但是这里我们只能使用number类型.这个时候我们就可以使用泛型来很好的解决这个问题.

示例:

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(1)
console.log(queue.pop().toFixed());
console.log(queue.pop().toFixed());

这个时候如果我们增加字符串类型就会报错了

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(1)
queue.push("str")
console.log(queue.pop().toFixed());
console.log(queue.pop().toFixed());

报错信息:

注意:我们在类那节说过，类有两部分：静态部分和实例部分。 泛型类指的是实例部分的类型，所以类的静态属性不能使用这个泛型类型。

泛型接口

示例:

interface KeyPair<T,U>{
    key:T
    value:U
}

let kp1:KeyPair<number,string> = {key:1,value:'str'}
let kp2:KeyPair<string,number> = {key:'1',value:1223}

使用泛型定义数组

let arr1:Array<number> = [1,2,3]