- TypeScript全栈开发
- 赵卓
- 1155字
- 2023-06-29 17:29:45
1.2 搭建TypeScript开发环境
要使用TypeScript进行编程,需要先搭建TypeScript开发环境。搭建工作并不复杂,接下来将详细介绍。
1.2.1 安装Node.js
TypeScript的安装需要使用npm工具,而npm运行在Node.js上,因此需要先安装Node.js。
前面已经提到,JavaScript原本只能在浏览器端使用,应用面有限。要实现服务器端的功能,我们必须换一种语言。2009年,Ryan Dahl基于Chrome的JavaScript开源引擎(V8引擎),开发并发布了Node.js运行环境,使JavaScript能够在服务端运行。
打开Node.js官网,选择Node.js版本,如图1-3所示。官网通常提供两个版本。长期维护版是稳定版本,官方会为其提供长达两年的技术支持、文档更新等服务,因此建议优先下载该版本。下载最新尝鲜版之后,你可以体验Node.js的最新特性,但可能会存在一些稳定性问题,读者可根据自己的需要下载。

图1-3 选择Node.js版本
下载后双击安装文件即可安装,安装过程非常简单,只需要选好安装路径并持续单击“下一步”按钮,直到出现Custom Setup界面,如图1-4所示。注意,应至少选择Node.js runtime(Node.js运行环境)、npm package manager(npm包管理工具)、Add to PATH(将Node.js安装目录配置到系统变量PATH中)这3项。

图1-4 Custom Setup界面
安装完成后,打开命令行窗口,输入以下命令查看Node.js运行环境以及npm包管理工具是否安装成功。
$ node --version
$ npm --version
命令运行结果如图1-5所示。如果显示了Node.js和npm的当前版本,则表示安装成功。

图1-5 命令运行结果
1.2.2 安装TypeScript
接下来,使用npm工具安装TypeScript。
npm(node package manager)是Node.js平台默认的包管理工具,也是世界上最大的JavaScript软件仓库之一,使用它可以轻松安装及发布各类基于Node.js运行的JavaScript软件。
打开命令行窗口,执行以下命令即可安装TypeScript。
$ npm install -g typescript
提示:由于npm库默认使用国外的仓库地址,因此若下载速度过于缓慢,可以设置成国内的镜像仓库地址,命令如下。
$ npm config set registry http://registry.npm.taobao.org/
要切换回默认的仓库地址,执行以下命令即可。
$ npm config set registry https://registry.npmjs.org/
安装完成后,使用tsc命令来执行TypeScript的相关代码。执行以下命令可验证安装结果,并查看tsc命令的使用方法。
$ tsc
tsc命令的执行结果如图1-6所示。

图1-6 tsc命令的执行结果
TypeScript的安装过程到此结束,为了高效地编写TypeScript代码,还需要安装一款合适的IDE。
1.2.3 安装Visual Studio Code
目前很多主流IDE(如WebStorm、Sublime Text 2、Eclipse和Visual Studio Code等)支持TypeScript,读者可以自行选择适合自己的IDE。
本书推荐使用Visual Studio Code,因为它与TypeScript同是微软公司推出的免费的开源产品,对TypeScript友好,支持智能提示,并能随时通知可能产生的Bug。
打开Visual Studio Code官网,根据操作系统下载对应的安装包,如图1-7所示。

图1-7 根据操作系统下载对应的安装包
安装过程非常简单,没有需要特别注意的设置。打开安装包后,选择安装路径,持续单击“下一步”按钮即可。Visual Studio Code安装后默认为英文界面,如需中文界面,可通过以下3个步骤。切换到Visual Studio Code中文界面,如图1-8所示。
(1)打开Visual Studio Code,单击“扩展”图标。
(2)输入关键字chinese。
(3)单击“中文(简体)”版本后面的Install按钮。

图1-8 切换到Visual Studio Code中文界面
之后重启Visual Studio Code,就可以看到中文界面了。图1-9所示为Visual Studio Code的中文界面。

图1-9 Visual Studio Code的中文界面