关于typescript:上帝视角看-TypeScript

TypeScript 的学习材料十分多，其中也不乏很多优良的文章和教程。然而目前为止没有一个我特地称心的。起因有：

• 它们大多数没有一个清晰的主线，而是依照 API 组织章节的，内容在 逻辑上 比拟零散。
• 大多是“讲是什么，怎么用“，而不是”讲为什么，讲原理“。
• 大多数内容比拟干燥，趣味性比拟低。都是水灵灵的文字，没有图片，不足可能引起强烈共鸣的例子。

因而我的想法是做一套不同市面上大多数的 TypeScript 学习教程。以人类认知的角度思考问题，学习 TypeScript，通过通俗易懂的例子和图片来帮忙大家建设 TypeScript 世界观。而本篇文章则是这个系列的开篇。

系列安顿：

• 上帝视角看 TypeScript（就是本文）
• TypeScript 类型零碎
• 什么是 types？什么是 @types？
• 类型推导，类型断言与类型爱护
• 你不晓得的 TypeScript 泛型（万字长文，倡议珍藏）（已公布）
• TypeScript 练习题
• TypeScript 配置文件该怎么写？
• TypeScript 是如何与 React，Vue，Webpack 集成的？

目录未来可能会有所调整。

留神，我的系列文章根本不会讲 API，因而须要你有肯定的 TypeScript 应用根底，举荐两个学习材料。

• 深刻了解 TypeScript
• 官网文档

联合这两个材料和我的系列教程，把握 TypeScript 不可企及。

接下来，咱们通过几个方面来从宏观的角度来看一下 TypeScript。

从输入输出上来看

如果咱们把 Typescript 编译器看成一个黑盒的话。其 输出则是应用 TypeScript 语法书写的文本或者文本汇合。

（文本）

如果几个文本有援用关系，比方 a.ts 依赖 foo.ts 和 bar.ts，其就是一个文本汇合。

（文本汇合）

输入是编译之后的 JS 文件 和 .d.ts 的申明文件。

其中 JS 是未来须要运行的文件，而 .d.ts 申明文件则是 ts 文件中的类型申明，这个类型申明就是你在 ts 文件中申明的类型和 TypeScript 类型推导零碎推导的类型。当然你也能够本人写 .d.ts 申明文件。

从性能上来看

从宏观的视角来看，TypeScript 的性能就是：

• 提供了丰盛的类型零碎。

最简略的就是 变量名: 类型 = 值

const a: Number = 1;

除了这些根本类型，还提供了函数类型，复合类型等。

• 提供了类型操作 API。TypeScript 岂但提供内置类型，用户也能够利用汇合操作和泛型对类型操作从而生成新的类型。

• 对每一种类型的属性和办法都进行了定义。

比方 String 类型有 toString 办法，然而没有 toFixed 办法，这就是 lib.d.ts 定义的。这样我在 String 类型的变量上应用 toFixed 办法就会报错，达到了“类型查看”的作用。

小提示：lib.d.ts 的内容次要是一些变量申明（如：window、document、math）和一些相似的接口申明（如：Window、Document、Math）。你能够通过 –noLib 来敞开这一性能

• 提供了模块零碎（module，namespace）。
• 提供了更加方面的 API，比方 class（这在 ES6 class 进去之前尤其好用），装璜器等。
• 。。。

TypeScript 编译器是如何工作的？

下面曾经探讨了 TypeScript 编译器的输出和输入。那黑盒外部是怎么工作呢？这里我简略介绍一下：

• TypeScript 文本首先会被解析为 token 流。这个过程比较简单，就是单纯地依照分隔符去宰割文本即可。

• 接着 token 流会被转换为 AST，也就是 形象语法树。

• binder 则依据 AST 信息生成 Symbol（TypeScript 中的一个数据结构）。拿下面的图来说，就是 number 节点。
• 当咱们须要类型查看的时候，checker 会依据 后面生成的 AST 和 symbols 生成类型查看后果。
• 当咱们须要生成 JS 文件的时候，emitter 同样会依据 后面生成的 AST 和 symbols 生成 JS 文件。

残缺图：

总结

总的来说，TypeScript 就是一门语言，和 Java，Python，C++ 等相似。只不过这门语言次要指标就是为了补救 JavaScript 弱类型带来的问题的。因而设计语言的出发点就是：

• 动态类型零碎
• 能够编译成 JavaScript

因而 TypeScript 是一门最终编译为 JavaScript 的语言（当然还有类型文件）。既然是一门语言，就波及词法剖析，语法分析等流程。因为绝对 JavaScript 减少了很多性能，其中最次要的就是类型零碎。因而 TypeScript 的剖析工作要比 JavaScript 更加简单，集中体现在 binder 和 checker 局部。

因为提供了动态类型，因而就须要提供一些内置类型给咱们用，比方 number，string，Array 等。然而这并不能满足咱们的所有需要，咱们须要自定义类型，因而有了 type，有了 interface 等。起初咱们又发现自定义的类型反复代码太多，要是类型也能够通过编程生成新的类型就好了，于是有了汇合运算和泛型。

代码都放到一起不不便保护，要是能够放到不同文件，须要用的时候组装起来就好了，于是有了模块化。我用了他人的用 TypeScript 开发的库，如果也能有类型校验就好了，于是有了 types。

。。。

其实这些都是有因果关系的，如果你能够牢牢地把握这些因果关系，那么学起来还不是大海捞针？

相干浏览

• TypeScript 编译原理
• Bring your own TypeScript with more internal definitions
• Compiler Internals
• TypeScript 编译器是用 TypeScript 写的，那是先有编译器还是 TS？

点关注，不迷路

大家也能够关注我的公众号《脑洞前端》获取更多更陈腐的前端硬核文章，带你意识你不晓得的前端。

知乎专栏【Lucifer – 知乎】