3.1 了解TypeScript

让我们一起来了解一下TypeScript与其他语言的异同点。

3.1.1 TypeScript与JavaScript、ECMAScript的关系

TypeScript的设计目标是作为JavaScript和ECMAScript的超集。TypeScript也可以看作“更好的JavaScript”。TypeScript充分利用了JavaScript原有的对象模型，并在此基础上进行了扩充，因此，任何合法的JavaScript都可以用在TypeScript中。

TypeScript是以JavaScript为目标语言的一种编译语言，并且提供了向原生JavaScript转换的编译器。任何TypeScript代码如果想要运行，则都需要先通过编译器编译成JavaScript文件，之后才能被浏览器所运行。

ECMAScript是JavaScript的国际标准，JavaScript是ECMAScript的实现。TypeScript同样遵守ECMAScript规范，并对ECMAScript进行了扩充。

图3-1展示了TypeScript与JavaScript、ECMAScript的关系。

3.1.2 TypeScript与Angular的关系

早期的AngularJS版本是采用JavaScript作为开发语言的。JavaScript虽然简单、易写，但在构建大型互联网应用时并不合适。因为JavaScript代码缺乏强类型、模块化、可测试等特性，所以在企业大规模开发中很难管理。

自Angular 2.x开始，使用TypeScript来构建应用。

3.1.3 使用TypeScript的优势

使用TypeScript的优势如下：

（1）TypeScript充分利用了JavaScript原有的对象模型，并在此基础上进行了扩充，添加了较为严格的类型检查机制、模块支持和API导出的能力。

（2）TypeScript使得代码组织和复用变得更加有序，使得开发大型Web应用有了一套标准方法。

（3）TypeScript具有静态类型检查、代码重构、测试和语言服务，有利于大型团队协作编写代码。

3.1.4 TypeScript代码的编译及运行

浏览器并不能直接运行TypeScript代码。所有的TypeScript代码必须经过TypeScript编译器编译成JavaScript文件，才能被浏览器所识别。图3-2展示了TypeScript的编译及运行过程。

1. 编译 TypeScript 代码

（1）编写一段最为简单TypeScript代码hello-typescript.ts，如下：

（2）通过TypeScript编译器对hello-typescript.ts进行编译。

提示：

当然，不指定文件类型也是可以的，TypeScript编译器会自动查找.ts文件。上述命令等同于“tsc hello-typescript”。

编译后，在与hello-typescript.ts相同的目录下，可以看到一个自动生成的hello-typescript.js文件。打开该hello-typescript.js文件，内容如下：

var hello=＇Hello World＇;

console.log(hello);

也就是说，在这个示例中，TypeScript使用了与JavaScript一致的语法。

2. 运行 JavaScript 文件

在Node.js中运行该JavaScript文件，具体操作如下：

当然，不指定文件类型也是可以的，Node.js会自动查找.js文件。上述命令等同于： 4vg/2/7QM+O9fCXULq46lOIO31xQJkskPPNCSc4guLZeqzqTrBGmGdhfJb0C3ZHj