购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

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 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的编译及运行过程。

图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文件。上述命令等同于: 8DTuY/Kpqo0gKfqyOaKvI7Yt/l1iylBR8wTVMEEsL1jLv1KcPyi3VOWw9pmtwy/o

点击中间区域
呼出菜单
上一章
目录
下一章
×