TypeScript是微软开源的一门面向对象的编程语言,是JavaScript的一个超集,因此对于已经存在的JavaScript程序,不需要任何改动就可以在TypeScript环境下运行。同时,TypeScript扩展了JavaScript的语法糖,添加了一些新的遵循ES6规范的语法,使得TypeScript具有了可选的静态类型和面向对象编程的特性。 作为一门全新的编程语言,TypeScript的诞生有它特殊的场景。Ajax的火热和JavaScript的复兴标志着前端一个全新时代的到来,这一时期的JavaScript代码正在变得越来越庞大,构建规模化JavaScript应用程序的需求日益旺盛。同时,微软工程师们发现,内部的研发部门以及外部的客户都表示JavaScript在大型Web应用中很容易出现失控,变得难以驾驭。 微软认为JavaScript只是一门脚本语言,设计理念简单,缺乏对类与模块的支持,并不能真正用于开发大型Web应用。基于此,微软内部开始出现需要自定义工具去强化JavaScript开发的需求。正是在这种情况下,微软的首席架构师安德斯·海尔斯伯格主持开发了TypeScript,并亲自进行推广。 自2012年10月份首个公开版本发布以来,迄今为止,TypeScript已发布了多个版本,并且越来越多的前端项目开始使用TypeScript来进行开发。和传统的JavaScript语言相比,TypeScript具有如下一些特点。
如今,TypeScript已经成为微软发展的重点项目,其新版本的发布节奏也加快到平均一个半月一次。在这样高强度的更新下,可以期待的是TypeScript必将成为前端开发的标准语言。
Node.js作为JavaScript的运行环境,大部分的JavaScript工具链都需要它才能运行,TypeScript也不例外。因此,安装TypeScript前需要先安装Node.js。 目前,TypeScript提供了两种安装方式:
需要说明的是,由于Visual Studio 2019已经包含了TypeScript插件,所以无需再手动进行安装。如果使用npm方式进行安装,只需要在终端执行如下的命令即可。
npm install –g typescript
不过,在实际项目开发过程中,并不需要对TypeScript进行全局安装。因为TypeScript自带的tsc命令并不能直接运行TypeScript代码。所以,通常安装的是TypeScript的运行时ts-node,如下所示:
npm install –g ts-node
ts-node并不等于TypeScript的Node.js,仅仅是封装了TypeScript编译的过程,提供直接运行TypeScript代码的能力。要编译TypeScript文件,可以使用如下的命令。
tsc filename.ts // filename为TypeScript文件名
其中,filename表示TypeScript文件名,ts是TypeScript文件的后缀。编译成功之后,会在相同目录下生成一个同名的js文件。当然,tsc命令工具还可以同时编译多个ts文件,多个文件之间用逗号隔开,如下所示。
tsc file1.ts, file2.ts, file3.ts
除了在本地执行编译操作外,TypeScript还提供了在线编译环境,开发者可以使用TypeScript提供的在线运行环境来体验TypeScript语言的魅力。
工欲善其事,必先利其器,选择一款合适的开发工具可以大大的提高开发效率。在TypeScript开发工具的选择上,我们推荐使用Visual Studio Code(简称VSCode),因为相比其他开发工具来说,它具有如下一些优势:
VSCode每次启动会自动检查是否为最新版本,并提示用户自动更新,所以无须担心当前是否为最新版本。 除了VSCode外,WebStrom也是一款不错的前端开发工具,开发时可以根据情况进行选择。
首先,我们新建一个index.html文件,然后添加如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learning TypeScript</title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html>
然后,再创建一个hello.ts文件,在文件中添加如下代码。
alert('hello world in TypeScript!');
使用tsc命令编译hello.ts文件,如下所示。
tsc hello.ts
等待编译完成,会在相同目录下生成一个hello.js文件,然后使用浏览器打开index.html文件,运行效果如图2-2所示。
除了编译文件命令外,tsc支持的常用命令还包括: