探索 TypeScript 类型注解 - 扩展的 JavaScript #4

zhilidali · 2019-11-03T15:10:32Z

Exploring TypeScript Type Annotations - Scale JavaScript

本文由 WowBar 团队首发于 GitHub

作者: zhilidali

欢迎来到 《探索 TypeScript 类型注解》 系列教程。
第一篇，我们将以 JavaScript 开发者的角度来探索 TypeScript，旨在让你（重新）认识 TypeScript。

1 TypeScript 的定义

What is Type？
下面从官方、JavaScript、作者三个维度对 TypeScipt 进行剖析。

1.1 官方定义

TypeScript 由 Microsoft 开发，开源于 GitHub。官网首页对 TypeScript 定义如下：

JavaScript that scales

TypeScript is a typed superset of javascript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.

“TypeScript 是 JavaScript 的类型超集，可以编译为原生 JavaScript”。所谓“超集”，就是说 TypeScript 扩展了 JavaScript，在 JavaScript 的基础上添加了新特性，新特性大致分为两类:

支持 ES6、ES.Next 语法特性。
- ES5 中作用域、函数与 this ...
- ES6 中 Symbol、iterator、generator、class ...
- ES Proposals 的 Decorator 特性 ...
- Mixin 编程模式和扩展的命名空间 ...
提供了 类型系统 用于 静态类型检查。
- TypeScript 使用一种称为 Type Annotation (类型注解) 的语法，对变量的类型进行说明。并约定使用 .ts 后缀文件。
- TypeScript Compiler (编译器) 对 .ts 文件进行类型检查，编译输出为原生 .js 文件，之后可在浏览器、Node 等环境中运行。

1.2 TypeScript VS. JavaScript

对于编译为 JavaScript 的语言，相信大多人跟我一样，从一开始是抵触的，纵然许多语言自诩：“去 JS 之糟粕，取 JS 之精华，推陈出新，革故鼎新 ...”。

值得一提的是，从编程范式 (JS 是一门多范式编程语言) 到语法层面， JavaScript 无不体现出其灵活性，尽管这让许多人感到困惑。例如隐式转换、原型继承等，虽然让很多开发者苦不堪言，但是真正掌握后则如鱼得水。关于 JavaScript 好与坏的问题，这里不讨论。下面主要来阐述，TypeScript 究竟于 JavaScript 有何不同。

如今 TypeScript 热度不断攀升，许多 JS 代码库纷纷采用了 TypeScript，这要归功于上文所提到的两类特性：

TypeScript 支持 JavaScript。TypeScript 是兼容认可 JavaScript 的，开发者只需将文件扩展名从 .js 改为 .ts，就实现了从 JavaScript 到 TypeScript 最简单转换，TypeScript Compiler 最终会编译输出为客户端环境可以理解的 JavaScript，正所谓“始于 JS，终于 JS”：Starts and ends with JavaScript。(TypeScript 不会让你已掌握的 JavaScript 知识没有用武之地。)
TypeScript 提供了强大的类型系统。类型系统是 TypeScript 和 JavaScript 最大的差别。类型系统的最直观表现，就是通过 Type Annotation 语法来约束变量的类型。如下，: number 表明变量 foo 的类型应为 Number。
```
let foo: number = 1;
```

虽然官方手册花费了大量的章节对 ES 及 ES6 进行了说明，但本系列不会重复讲解。

1.3 我眼中的 TypeScript

官方定义 TypeScript 是 JavaScript 的类型超集，而在我看来，TypeScript 是 JavaScript 的子集，TypeScript 并不是一种全新的语言，类型系统作为 TypeScript 最大的特性亮点，用于扩展 JavaScript，就像 ES Proposals 所扮演的角色一样，属于未来 ES.Next 的语法。

事实上，早在 ES4 (未通过) 中，就加入了静态检查和类型注解等相关特性, 如同EcmaScript Proposals 和 ES6 中新语法一样，许多特性可在 ES4 中找到其身影。(当然如果你想问 ECMAScript 会不会加入静态检查，就目前来看，这不会很快。)

当然，不同的人对 TypeScript 会有不同的看法，关键在于，要对 TypeScript 有个清晰的认识。

另外，关于 TypeScript 支持的 ES.Next 新特性，如何才能在现有环境中顺利运行，我给出答案是 Babel，使用 plugin (插件) 或 preset (预设) 来转换新的 JavaScript 语法。无独有偶，@babel/preset-typescript 更加坚定了我对 TypeScript 的定位，作为 Babel 预设来处理 TypeScript，与处理 ES proposals 如出一辙，简直是完美。

@babel/preset-typescript 是由 Babel 团队与 TypeScript 团队共同合作开发

2 TypeScript 的优点

Why Typescript？
下面介绍 TypeScript 类型系统的优点。

避免潜在的 bug。JavaScript 是一门弱类语言，动态类型可能会让经验不足和习惯强类型语言的开发者摸不着头脑，运行时各种 Uncaught TypeError 满天飞，而 TypScript 在编译时就能及时发现潜在的错误。
增加代码的易读性和可维护性。编码时，Type Annotation 可作为参考文档，比如当你引入一个用 TypScript 编写的第三方库时，无需频繁查阅文档，在 VSCode 中，IntelliSense 会有相应的接口提示。尤其在项目规模越发庞大时，开发人员之间的协作，使得人工维护的代码如何描述自身显得极其重要。

另外，源于 JavaScript 的 TypeScript 早已渗透回 JavaScript。比如：

在 .js 文件中，使用 JSDoc 注释来注解变量的类型。
JavaScript 根项目中的 jsconfig.json 文件，来源于 TypeScript 配置文件 tsconfig.json。
只要用 VSCode 编写过 JavaScript 代码，事实上就已经体验了 TypsScript 带来的便利性。

3 TypeScript 的用法

How TypeScript？
下面是 TypeScript 的入门使用。

3.1 Installing

首先通过 npm 来安装 TypeScript Compiler

$ npm i -g typescript

之后，我们就可以在终端执行 tsc 命令

3.2 Compiling

首先编写我们的 .ts 代码，其中变量后面的 : string Type Annotation 语法，约定变量 name 的数据类型为 String。

let name: string = 'TypeScript';

编译 TypeSciprt 很简单，只需在项目中下执行 tsc file.ts 命令，就会编译输出为 .js 代码文件

let name = `TypeScripts`;

3.3 Configuring

同 babel 编译器一样，TypeScript Compiler 提供了许多编译选项，来细粒度控制编译器的行为。可通过命令参数或者 tsconfig.json 文件来设置。

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"allowJs": true,
		"checkJs": true,
		"strict": true
	}
}

结语

通过本篇对 TypeScript 本质的探索，希望你已（重新）认识了 (值得学习的) TypeScript。
本文中提到的类型系统，以及代码块中 Type Annotation 语法，也许你有点摸不着头脑。别急，后续我们会展开全面的讲解。

协议

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。