1.3　安装TypeScript

前面阐述了TypeScript的相关概念，以及TypeScript相比JavaScript来说具备的若干优势。作为程序员来说，经常挂在嘴上的是“光说好没用，关键是给我看代码”（Talk is cheap. Show me the code）。

假设把学习TypeScript当作一次自驾游，那么搭建TypeScript的开发环境就相当于确定自驾游的代步工具。

获取TypeScript开发工具有两种主要方法：

• 　通过npm命令行安装。
• 　通过安装TypeScript的Visual Studio插件。

下面分别说明这两种方法的安装步骤。

1.3.1　npm安装

npm是JavaScript常用的包管理工具，也是Node.js的默认包管理工具。通过npm可以安装、共享、分发代码和管理项目依赖关系。

由于TypeScript需要通过npm安装，而npm依赖于Node.js，因此第一步就是先安装Node.js环境。

1．安装Node.js

（1）Node.js发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行封装。可以在https://nodejs.org官网上下载最新的版本（例如下载10.15.1 LTS版），如图1.3所示。

图1.3　Node.js下载界面

（2）如果需要下载之前的版本，可以在https://nodejs.org/en/download/releases/中下载。这里下载Node.js 10.13.0进行安装。下载完成后双击文件，打开安装界面，如图1.4所示。

图1.4　Node.js安装界面

（3）一般来说，按照向导一步一步根据默认配置进行安装即可，安装完成后，需要验证一下安装是否成功。用组合键Win+R打开Windows操作系统上的运行界面，输入“cmd”后按回键车打开命令行工具。

（4）在命令行工具中输入“node -v”和“npm -v”查看是否安装成功，如果安装成功就会显示版本号，如图1.5所示。

图1.5　Node.js查看版本界面

从图1.5可以看出，node –v命令输出Node.js的版本为10.13.0，说明Node.js安装成功，且Node.js目录已经注册到环境变量path中。npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题。

本地安装将安装包放在./node_modules下（运行npm命令时所在的目录），如果没有node_modules目录，就会在当前执行npm命令的目录下生成node_modules目录。本地安装的模块需要通过require（）来引入。

全局安装则将安装包放在node的安装目录下（window），全局安装的模块可以直接在命令行里使用。

2．使用npm安装TypeScript

在命令行工具界面中输入命令“npm install -g typescript”全局安装TypeScript，稍等片刻，等待安装完成后，用命令tsc -v查看其版本号来验证是否安装成功，如图1.6所示。

图1.6　npm安装TypeScript界面

从图1.6可以看出，当前安装的TypeScript版本为3.3.3。至此，TypeScript安装完成。

修改npm的镜像如代码1-1所示。

【代码1-1】持久修改npm的镜像：npm_register.txt

    01  //持久使用
    02  npm config set registry https://registry.npm.taobao.org
    03  //验证是否成功
    04  npm config get registry

1.3.2　Visual Studio插件安装

由于TypeScript语言是微软公司开发的，因此势必在其IDE Visual Studio上进行集成。Visual Studio 2017和Visual Studio 2015 Update 3默认包含TypeScript。

Visual Studio是一个完整的集成开发工具，提供了一站式开发工具集合，能够支持现在IT行业上主流的编程语言。它包括了整个软件生命周期中所需要的大部分工具，如UML建模工具、代码管理工具、代码编辑和调试、程序测试和程序发布等。Visual Studio所写的目标代码适用于微软支持的所有平台。

Visual Studio版本很多，其中Visual Studio Community为社区版，适用于学生、开源和个人。该版本有相对完备的免费IDE，可用于开发Android、iOS、Windows和Web的应用程序。

如果在安装Visual Studio的时候未安装TypeScript工具，后续仍可通过下载插件TypeScript SDK for Visual Studio进行安装。

1．安装TypeScript SDK for Visual Studio

（1）打开Visual Studio开发工具，在菜单【工具】下单击【扩展和更新（U）...】菜单项，界面如图1.7所示。

图1.7　Visual Studio工具菜单界面

（2）在弹出的【扩展和更新】界面，通过在右边的文本框中输入typescript进行联网搜索，找到对应版本的TypeScript SDK for Visual Studio，这里选择TypeScript 3.3.1 for Visual Studio 2017，单击【下载】按钮进行插件下载，如图1.8所示。

图1.8　Visual Studio扩展和更新界面

（3）下载完成后，双击TypeScript_SDK.exe文件进行TypeScript环境安装，在弹出的安装界面上单击【Install】按钮完成安装，如图1.9所示。

图1.9　TypeScript SDK安装界面

2．安装TypeScript HTML Application Template

TypeScript SDK安装完成后，并没有包含创建TypeScript项目的模板，因此还需要通过扩展和更新界面安装TypeScript HTML Application Template插件，单击【下载】按钮进行联网下载并完成安装，如图1.10所示。

图1.10　TypeScript HTML Application Template下载界面

在弹出的【VSIX Installer】界面中，单击【修改】按钮进行安装，如图1.11所示。

图1.11　TypeScript HTML Application Template插件安装界面

至此，通过Visual Studio安装TypeScript相关插件来搭建开发环境就完成了。