TypeScript介绍与安装

本节我们来学习 TypeScript 语言。 TypeScript 看名字就和 JavaScript 很像，事实上它们两者也确实有关联。TypeScript 是 JavaScript 的超集，它对 JavaScript 进行了一些规范和补充。

TypeScript 介绍

• TypeScript 可以编译成纯 JavaScript，编译出来的 JavaScript 可以在任何游览器上运行。
• TypeScript 可以在任何浏览器，任何计算机和任何操作系统上运行，而且它是开源的。
• TypeScript 扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以运行在 TypeScript 环境中。
• TypeScript 起源于使用 JavaScript 开发的大型项目，由于 JavaScript 语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了 TypeScript ，使得其能够胜任开发大型项目。

什么是超集？

上面我们说 TypeScript 是 JavaScript 的超集。那什么是超集呢？

超集的定义：如果一个集合 S2 中的每一个元素都在集合 S1 中，且集合 S1 中可能包含 S2 中没有的元素，则集合 S1 就是 S2 的一个超集。

这也就是说，JavaScript 的所有功能 TypeScript 里都有，但 TypeScript 里的功能 JavaScript 就未必有，毕竟 TypeScript 扩展提升了 JavaScript 的编写体验，例如：静态类型检查 JavaScript 就没有，而依赖 TypeScript 就可以很方便进行静态类型检查，所以 TypeScript 是 JavaScript 的超集。且 TypeScript 编写的代码，最终都可以生成标准的 JavaScript 代码。

TypeScript 的优势

• Typescript 支持 ES6 规范的语言，ES6 规范指出未来客户端脚本语言的发展方向，Typescript 脚本语言的语法会成为未来一段时间客户端语言的主流语法。
• 类型检测：在 Typescript 中为变量指定具体类型时，IDE 会做出类型检测，然后告诉你这里可能会有错误，这个特性可以帮助我们减少在开发阶段犯错几率。
• 语法提示：在 IDE 里编写 Typescript 代码时，IDE 会根据你当前的上下文，把你能用的类、变量、方法和关键字都给你提示出来。直接选择，这个特性提高开发效率。
• 是 Angular2 框架的开发语言，因此 Typescript 有利于我们学习 Angular2 框架。Angular2 是一款开源的 JavaScript 库，由谷歌维护，用来协助单一页面应用程序运行。

TypeScript 安装

在我们安装 TypeScript 之前，需要保证已经安装好了 Node.js，如果没有安装请先安装好 Node.js。

安装完 Node.js 之后，就可以开始安装 TypeScript 啦。

如何安装node.js

Node.js 下载地址：https://nodejs.org/en/download/，大家下载好后根据步骤安装即可。

安装完成后，我们可以在电脑上打开终端，在终端中输入 node -v 命令，如下图：

如果按下回车后，界面成功输出版本号则说明 Node.js 已经安装成功，上图表示成功安装了 v12.16.1 版本的 Node.js。

如何安装TypeScript

Node.js 自带 npm，我们可以通过 npm 全局安装 TypeScript ，在命令行中输入如下命令：

npm install -g typescript

按下回车键就会自动开始安装，安装完成后，显示如下图所示表示：

其中 -g 表示全局安装，typescript 表示安装的程序名。

如果想要检测安装是否成功，可以在刚刚的窗口中输入 tsc -v 命令，这样可以查看到 TypeScript 的版本号，下图中显示版本号为 3.8.3：

Visual Studio Code

我们要学习 TypeScript，首先选择一个适合自己的 IDE（集成开发环境）。 有很多 IDE 都支持 TypeScript 插件，例如 Visual Studio Code、Sublime Text 2、WebStorm、Eclipse 等。然后我选择的是 Visual Studio Code ，所以首先我们需要下载安装 Visual Studio Code，如果你电脑上有就不需要重新安装了。

Visual Studio Code 下载地址：https://code.visualstudio.com/。

下载后根据提示安装即可，安装完成后，打开 Visual Studio Code 软件，然后找到应用商店：

在搜索框中输入 TypeScript ，点击绿色的安装按钮，即可安装 TypeScript 插件，如下图所示（下图是已经安装好了插件，绿色按钮就会消失）：

此时准备工作差不多完成了，下一节我们开始学习 Typescript 的使用。