TypeScript快速入门

1，TypeScript简介

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具有如下一些特点。

免费开源，使用Apache授权协议。
基于ECMAScript标准进行拓展，是JavaScript的一个超集。
添加了可选静态类型、类和模块语法。
可以编译为可读的、符合ECMAScript规范的JavaScript。
成为一款跨平台的工具，支持所有的浏览器、主机和操作系统。
保证可以与JavaScript代码一起运行，无须修改。
文件拓展名是ts。
编译时检查，不污染运行时。

如今，TypeScript已经成为微软发展的重点项目，其新版本的发布节奏也加快到平均一个半月一次。在这样高强度的更新下，可以期待的是TypeScript必将成为前端开发的标准语言。

2，环境搭建

Node.js作为JavaScript的运行环境，大部分的JavaScript工具链都需要它才能运行，TypeScript也不例外。因此，安装TypeScript前需要先安装Node.js。目前，TypeScript提供了两种安装方式：

使用npm包管理器方式。
安装Visual Studio的TypeScript插件方式。

需要说明的是，由于Visual Studio 2019已经包含了TypeScript插件，所以无需再手动进行安装。如果使用npm方式进行安装，只需要在终端执行如下的命令即可。

代码语言：javascript复制

npm install –g typescript

不过，在实际项目开发过程中，并不需要对TypeScript进行全局安装。因为TypeScript自带的tsc命令并不能直接运行TypeScript代码。所以，通常安装的是TypeScript的运行时ts-node，如下所示：

代码语言：javascript复制

npm install –g ts-node

ts-node并不等于TypeScript的Node.js，仅仅是封装了TypeScript编译的过程，提供直接运行TypeScript代码的能力。要编译TypeScript文件，可以使用如下的命令。

代码语言：javascript复制

tsc filename.ts        // filename为TypeScript文件名

其中，filename表示TypeScript文件名，ts是TypeScript文件的后缀。编译成功之后，会在相同目录下生成一个同名的js文件。当然，tsc命令工具还可以同时编译多个ts文件，多个文件之间用逗号隔开，如下所示。

代码语言：javascript复制

tsc file1.ts, file2.ts, file3.ts

除了在本地执行编译操作外，TypeScript还提供了在线编译环境，开发者可以使用TypeScript提供的在线运行环境来体验TypeScript语言的魅力。

开发工具选择

工欲善其事，必先利其器，选择一款合适的开发工具可以大大的提高开发效率。在TypeScript开发工具的选择上，我们推荐使用Visual Studio Code（简称VSCode），因为相比其他开发工具来说，它具有如下一些优势：

免费开源，支持跨平台开发且跨平台体验非常一致。
由微软主导开发，对TypeScript有良好的支持。
提供代码智能补全功能的智能感知。
提供丰富的开发插件，开发与调试异常方便。 VSCode的安装也非常简单，打开VSCode的官网，然后根据当前系统版本下载对应的安装包即可，如图1-1所示。

VSCode每次启动会自动检查是否为最新版本，并提示用户自动更新，所以无须担心当前是否为最新版本。除了VSCode外，WebStrom也是一款不错的前端开发工具，开发时可以根据情况进行选择。

示例程序

首先，我们新建一个index.html文件，然后添加如下代码：

代码语言：javascript复制

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Learning TypeScript</title>
</head> 
<body> 
    <script src="hello.js"></script>
</body> 
</html>

然后，再创建一个hello.ts文件，在文件中添加如下代码。

代码语言：javascript复制