ts实战系列九：类使用泛型

最新推荐文章于 2024-04-27 18:23:47 发布

完美句号

最新推荐文章于 2024-04-27 18:23:47 发布

阅读量362

点赞数 8

文章标签：前端 javascript 开发语言性能优化系统架构 typescript 架构

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135328687

版权

文章介绍了如何在JavaScript中使用泛型创建类，以确保队列操作时推入和推出的元素类型一致。首先展示了普通队列的实现及其局限性，然后引入泛型队列类，如`Queue`，以提高代码的类型安全性。

摘要由CSDN通过智能技术生成

2. 类使用泛型:

(1). 实现一个队列:

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());      // 在运行时会报错,因为str没有toFixed方法

(2). 改进:

class Queue {
    private data = [];
    push(item: number) {
        return this.data.push(item);
    }
    pop(): number {
        return this.data.shift();
    }
}
const queue = new Queue();
queue.push(1);
queue.push('str');                      // 这里会报错,但是如果想创建一个字符串的对列呢?
console.log(queue.pop().toFixed());
console.log(queue.pop().toFixed());

(3). 如何使推入队列的类型与推出队列的类型一致,创建一个泛型类:

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());

const queue2 = new Queue<string>();
queue2.push('str');
console.log(queue2.pop().length);