上帝视角看 TypeScript,充电了!

前端下午茶

共 2846字,需浏览 6分钟

 ·

2020-11-12 01:44


TypeScript 的学习资料非常多,其中也不乏很多优秀的文章和教程。但是目前为止没有一个我特别满意的。原因有:

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

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

注意,我的系列文章基本不会讲 API,因此需要你有一定的 TypeScript 使用基础,推荐两个学习资料。

  • 深入理解 TypeScript  https://jkchao.github.io/typescript-book-chinese/
  • 官方文档 https://www.typescriptlang.org/docs/home

结合这两个资料和我的系列教程,掌握 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 编译原理 https://jkchao.github.io/typescript-book-chinese/compiler/overview.html
  • Bring your own TypeScript with more internal definitions https://github.com/basarat/byots
  • Compiler Internals https://github.com/microsoft/TypeScript/wiki/Compiler-Internals
  • TypeScript 编译器是用 TypeScript 写的,那是先有编译器还是 TS https://github.com/azl397985856/fe-interview/issues/135


最后



如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

  1. 点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)

  2. 欢迎加我微信「qianyu443033099」拉你进技术群,长期交流学习...

  3. 关注公众号「前端下午茶」,持续为你推送精选好文,也可以加我为好友,随时聊骚。


点个在看支持我吧,转发就更好了


浏览 28
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报