本文作者为 360 奇舞团前端开发工程师

一、什么是泛型

泛型，我们光从字面上来推断，泛，宽泛，广泛，型，型号，类型。所以我们可以先认为，泛型就是给我们的代码增加一种相对宽泛的类型约束。在TypeScript中，我们定义一个变量，我们可以赋予其一种确定的类型。使得我们的代码具有更好的维护性，但是在增强代码的可维护性同时，我们又要考虑代码应该具有一定的灵活性。使得在未来，代码也能被复用。于是泛型就在这个背景下出现了。

二、泛型函数

const printFun = (value) => {
    console.log(value);
    return value;
};

console.log(printFun("hello world"));

我们在上面代码中创建了一个函数，作用很简单，就是打印我们传入的参数并返回该值。这时我们没有添加任何类型约束。我么可以传入一切类型，但是我们现在希望，该函数只能打印我们传入的类型。而且返回值的类型一定要和传入的参数类型一致，所以我们就要给代码增加一定约束，就像下面这样。

const printFun = (value: string): string => {
  console.log(value);
  return value;
};

printFun("hello world");

现在我们的函数就只能接收字符串类型的变量了，并将其返回。

在未来的某一天，我们需要打印一个数字，我们调用这个函数的时候，就会报错，并提示我们需要传入字符串类型，前面这段代码虽然有了一定的约束性，但是也丢失了灵活性，我们当然可以通过重新定义一个函数，来解决这个问题，但是，我们如果使用泛型来解决这个问题，就显得更加合适。

const printFun = <T>(value: T): T => {
  console.log(value);
  return value;
};

printFun(233);

我们在代码中引入了一对尖括号，并传入了一个T，字母T代表一种类型，一种没有确定的类型，我们可以把这个T看作和函数所接收的参数value一样，是一个占位符，我们可以用自己喜欢的字母，单词来替换掉T，在我们没有给函数传参之前，我们只通过这个函数，至少就能知道一点，函数的入参和出参，在类型上是一致的，这就对我们的代码形成了约束，但是这种约束和我们具体定义某一种类型不同，我们定义函数时，也并不知道，T具体会是什么类型。我们可以把这种写法和函数传参进行对比，声明函数时，我们也不知道value的值会是什么。但是在给函数传参的时候，我们value的值就确定了，此时T的类型也被确定了，推断出T是number类型。同理，我们如果传入一个字符串的话，T就会被确定为string类型，这样我们的代码在有了更好的灵活性的同时，也具有了一定的约束。

三、泛型接口

interface是我们在使用TS的时候，最常用的关键字。

interface Person {
  name: string;
  age: number;
}
const me: Person = {
  name: "sunny",
  age: 18,
};

我们在前面的代码中用声明接口限制了一个对象，我们也可以通过泛型对我们的接口进行改造。

这时候我们通过定义J,K两个占位符，使得我们的接口具备了泛型，更加灵活。但是我们发现泛型接口和泛型函数不一样，我们像前面图片中这样使用，有一个地方报错了，提示我们需要传入类型参数，而不能依赖自动的类型推断，来确实对象属性的类型，其实这也是可以理解，因为我们对一个对象的限制，主要就是限制对象的属性类型，如果我们不确定类型，那我们传入的一切类型都是有效的了。就起不到类型的限制，而前面我们使用泛型函数，虽然没有显示声明类型，但是我们达到了对函数入参和出参进行了统一。

interface Person<J, K> {
  name: J;
  age: K;
}
const me: Person<string, number> = {
  name: "sunny",
  age: 18,
};

这次我们在使用泛型接口时，对其传入了两个确定的类型。J,K的类型也因此确定了。其实在学习泛型之前，大家或许就已经使用过泛型了，比如

const arr: Array<number> = [1, 2, 3];

这是TS中定义一个数组的一种写法。其实就是定义了一个数组对象，并限制了数组中每个元素的类型为number。

四、泛型约束

我们使用泛型也是为了对我们的代码进行类型的约束,但是泛型我们知道是一种没有确定的类型，我们通过下面的代码来感受一下。

我们给函数传入了一个对象，在函数中想要读取其所具有的属性值，但是编辑器却提示我们类型T上没有age和name属性。因为泛型本身就不是某一种具体的类型，所以静态的类型检查，自然无法判断出，其是否具有相应的类型。我们可以对函数进行一些改造，像下面这样。

interface Person<J, K> {
  name: J;
  age: K;
}
const printFun = <T extends Person<string, number>, S>(
  person: T,
  msg: S
): S => {
  console.log(person.age);
  console.log(person.name);
  return msg;
};
printFun({ name: "sunny", age: 18 }, "success");

这次我们使用了extends关键字，和接口泛型，对类型T进行了一些扩展，使得其具备了我们所要求的属性。

五、小结

通过前面几节的介绍，我们对泛型有了初步的了解，知道泛型出现的背景和意义，能将泛型初步的使用于我们的项目之中。