TypeScript 在类中使用泛型在JavaScript中，封装一个API可以具有多种用途，因为其实弱类型语言，但是就

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

前言

在JavaScript中，封装一个API可以具有多种用途，因为其实弱类型语言，但是就因为是弱类型可以最终得到的结果并不是我们想要的。

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

下面为大家介绍一下泛型的简单使用和如何在类中使用泛型。

简单的使用

现在我们要定义一个join函数，该函数的功能主要是接受两个类型一样的值，返回两个参数拼接后的值。示例代码如下：

// 所谓的泛型，通俗一点的解释就是泛指的类型
// 定义一个join函数，接受两个一样类型的参数，并将两个参数拼接后返回。
function join<T>(first: T, second: T) {
  return `${first}${second}`
}
// 这里明确 T 为 string 类型
join<string>('第一', '第二') // 第一第二
// 这里通过类型推导的方式，编译器会根据传入的参数自动推断出类型
join(1, 2) // 12

定义泛型是通过<>对尖括号来定义，我们在定义join函数的时候，并不知道可以接受那些类型，但是可以明确的是两个类型是必须一样的，如果想要满足这样的需求，不用泛型的话解决起来是没有这么简单的。在调用函数的时候，这里使用了两种方式，一种是直接指定类型为string类型；另一种是通过类型推导的方式，编辑器会根据传入的参数自动帮助我们确定类型。

在类中使用泛型

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

class GenericNumber<T> {

    zeroValue: T;

    add: (x: T, y: T) => T;

}

let myGenericNumber = new GenericNumber<number>();

myGenericNumber.zeroValue = 0;

myGenericNumber.add = function(x, y) { return x + y; };

GenericNumber类的使用是十分直观的，并且你可能已经注意到了，没有什么去限制它只能使用number类型。也可以使用字符串或其它更复杂的类型。

let stringNumeric = new GenericNumber<string>();

stringNumeric.zeroValue = "";

stringNumeric.add = function(x, y) { return x + y; };

console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));

与接口一样，直接把泛型类型放在类后面，可以帮助我们确认类的所有属性都在使用相同的类型。