扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了TypeScript中泛型Generics怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
10年积累的网站建设、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有宝坻免费网站建设让你可以放心的选择与我们合作。
要从本文中跟着学习的话，你需要在电脑上准备以下东西：
安装Node.js：你可以运行命令行检查Node是否安装好了。
node -v
安装Node Package Manager： 通常安装Node时，它会顺带安装好所需版本的NPM。
安装TypeScript：如果你安装好了Node Package Manager，你可以用以下命令在本机的全局环境安装TypeScript。
npm install -g typescript
集成开发环境：本文将使用微软团队开发的Visual Studio Code。可以在这里下载。进入其下载的目录，并按照提示进行安装。记得选择“添加打开代码”（Add open with code）选项，这样你就可以在本机从任何位置轻松打开VS Code了。
本文是写给各层次的TypeScript开发人员的，包括但并不只是初学者。 这里给出了设置工作环境的步骤，是为了照顾那些TypeScript和Visual Studio Code的新手们。
在TypeScript中，泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用，泛型是一种用以增强类（classes）、类型（types）和接口（interfaces）能力的非常可靠的手段。这样，我们开发者，就可以轻松地将那些可复用的代码组件，适用于各种输入。然而，不要把TypeScript中的泛型错当成any类型来使用——你会在后面看到这两者的不同。
类似C#和Java这种语言，在它们的工具箱里，泛型是创建可复用代码组件的主要手段之一。即，用于创建一个适用于多种类型的代码组件。这允许用户以他们自己的类使用该泛型组件。
在计算机中创建一个新文件夹，然后使用VS Code 打开它（如果你跟着从头开始操作，那你已经安装好了）。
在VS Code中，创建一个app.ts文件。我的TypeScript代码都会放在这里面。
把下面打日志的代码拷贝到编辑器中：
console.log("hello TypeScript");按下F5键，你会看到一个像这样的launch.json文件：
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "TypeScript",
"program": "${workspaceFolder}\\app.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}里面的name字段的值，本来是Launch Program，我把它改成了TypeScript。你可以把它改成其他值。
点击Terminal Tab，选择Run Tasks，再选择一个Task Runner："TypeScript Watch Mode"，然后会弹出一个tasks.json文件，把它改成下面像这样：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "tsc",
"args": ["-w", "-p","."],
"problemMatcher": [
"$tsc-watch"
],
"isBackground": true
}
]
}在app.ts所在的目录，创建另一个文件tsconfig.json。把下面的代码拷贝进去:
{
"compilerOptions": {
"sourceMap": true
}
}这样，Task Runner就可以把TypeScript编译成JavaScript，并且可监听到文件的变化，实时编译。
再次点击Ternimal标签，选择Run Build Task，再选择tsc: watch - tsconfig.json，可以看到终端出现的信息：
[21:41:31] Starting compilation in watch mode…
你可以使用VS Code的调试功能编译TypeScript文件。
设置好了开发环境，你就可以着手处理TypeScript泛型概念相关的问题了。
TypeScript中不建议使用any类型，原因有几点，你可以在本文看到。其中一个原因，就是调试时缺乏完整的信息。而选择VS Code作为开发工具的一个很好的理由，就是它带来的基于这些信息的智能感知。
如果你有一个类，存储着一个集合。有方法向该集合里添加东西，也有方法通过索引获取集合里的东西。像这样:
class Collection {
private _things: string[];
constructor() {
this._things = [];
}
add(something: string) {
this._things.push(something);
}
get(index: number): string {
return this._things[index];
}
}你可以很快辨识出，此集合被显示定义为一个string类型的集合，显然是不能在其中使用number的。如果想要处理number的话，可以创建一个接受number而不是string的集合。着是一个不错的选择，但有一个很大的缺点——代码重复。代码重复，最终会导致编写和调试代码的时间增多，并且降低内存的使用效率。
另一个选择，是使用any类型代替string类型定义刚才的类，像下面这样：
class Collection {
private _things: any[];
constructor() {
this._things = [];
}
add(something: any) {
this._things.push(something);
}
get(index: number): any {
return this._things[index];
}
}此时，该集合支持你给出的任何类型。如果你创建像这样的逻辑构建此集合的话：
let Stringss = new Collection();
Stringss.add("hello");
Stringss.add("world");这添加了字符串"hello"和"world"到集合中，你可以打出像length这样的属性，返回任意一个集合元素的长度。
console.log(Stringss.get(0).length);
字符串"hello"有五个字符，运行TypeScript代码，你可以在调试模式下看到它。
请注意，当你鼠标悬停在length属性上时，VS Code的智能感知没有提供任何信息，因为它不知道你选择使用的确切类型。当你像下面这样，把其中一个添加的元素修改为其他类型时，比如number，这种不能被智能感知到的情况会体现得更加明显：
let Strings = new Collection();
Strings.add(001);
Strings.add("world");
console.log(Strings.get(0).length);你打出一个undefined的结果，仍然没有什么有用信息。如果你更进一步，决定打印string的子字符串——它会报运行时错误，但不指不出任何具体的内容，更重要的是，编译器没有给出任何类型不匹配的编译时错误。
console.log(Stringss.get(0).substr(0,1));
这仅仅是使用any类型定义该集合的一种后果罢了。
刚才使用any类型导致的问题，可以用TypeScript中的泛型来解决。其中心思想是类型安全。使用泛型，你可以用一种编译器能理解的，并且合乎我们判断的方式，指定类、类型和接口的实例。正如在其他强类型语言中的情况一样，用这种方法，就可以在编译时发现你的类型错误，从而保证了类型安全。
泛型的语法像这样：
function identity(arg: T): T { return arg; }
你可以在之前创建的集合中使用泛型，用尖括号括起来。
class Collection{ private _things: T[]; constructor() { this._things = []; } add(something: T): void { this._things.push(something); } get(index: number): T { return this._things[index]; } } let Stringss = new Collection (); Stringss.add(001); Stringss.add("world"); console.log(Stringss.get(0).substr(0, 1));
如果将带有尖括号的新逻辑复制到代码编辑器中，你会立即注意到"001"下的波浪线。这是因为，TypeScript现在可以从指定的泛型类型推断出001不是字符串。在T出现的地方，就可以使用string类型，这就实现了类型安全。本质上，这个集合的输出可以是任何类型，但你指明了它应该是string类型，所以编译器推断它就是string类型。这里使用的泛型声明是在类级别，它也可以在其他级别定义，如静态方法级别和实例方法级别，你稍后会看到。
你可以在泛型声明中，包含多个类型参数，它们只需要用逗号分隔，像这样：