携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

前言

继续上一节，我们接着说下泛型和类的使用，以及泛型约束

泛型类

• 我们先来看一段代码

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

• 在上述代码中存在一个问题，它允许你向队列中添加任何类型的数据，当然，当数据被弹出队列时，也可以是任意类型。在上面的示例中，看起来人们可以向队列中添加 string 类型的数据，但是那么在使用的过程中，就会出现我们无法捕捉到的错误，
• 我们通过泛型，来定义我们的条件,限制传入的类型

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就可以正常调用它拥有的方法了。

泛型约束

• 在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法。比如我们之前使用的例子：

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}

• 之前我们假设是参数数组的情况，设置了数组类型
• 如果我们想要限制函数去处理任意带有.length属性的所有类型，只要传入这个，我们就允许
• 我们可以通过泛型约束来完成这种需求
• 我们定义一个包含.lenght属性的接口，作为约束条件，通过extends关键字来实现约束

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length); 
    return arg;
}

• 此时我们约束了T是带有.length属性的任意类型，函数体内不会报错了。
• 如果我们传入的参数不带有.lenght属性，方法就会报错

loggingIdentity(3);  // Error, number doesn't have a .length property

总结

• 这一节，我们介绍了泛型类和泛型约束，完成我们后续的开发工作，基本足够了。