0%

TypeScript 由微软在 2012 年 10 月首发,经过几年的发展,已经成为国内外很多前端团队的首选编程语言。前端三大框架中的 Angular 和 Vue 3 也都改用了 TypeScript 开发。即使很多人没直接用过 TypeScript,他们也在通过 VSCode 提供的智能提示功能间接享受着 TypeScript 带来的各项便利。推荐一下电子书深入理解 TypeScript,虽然没看完,一定会抽空阅读。也有大佬们写好的总结,淡如止水 TypeScript,打算也偷偷复制一份。

很多人对 TypeScript 背后的原理很感兴趣,你可能想要:

  • 更好地理解 TypeScript;
  • 学习编译原理相关的知识来丰富自己(编译器和操作系统是很多程序员的梦想);
  • 设计一门类似的语言;
  • 定制自己的打包工具;
  • 做一个 VSCode 插件。

但你上网搜索,你会发现能搜到的全是 TypeScript 如何使用的教程,即使是英文的资料,也鲜有能完全讲解清楚 TypeScript 内部原理的文章。

只有少数的几篇教程会在文末稍微附带一下原理说明,但它们只是大概阐述了一下 TypeScript 的整体架构,最核心的类型分析的具体实现几乎都是一句带过。

能真正了解 TypeScript 内部原理的人极少,多数人对 TypeScript 的想法是:“这方面的东西和我工作没啥关系,我只管能用就行!”(其实内心的想法是:这东西好烦啊!为什么大家都在用?求你别加功能了,学不动了……)

既然你读到这里了,说明你真的想学习 TypeScript 的内部原理。这篇系列文章不教你如何使用 TypeScript(那种你网上随便一搜,很多),我假设你已经熟悉了 TypeScript 的各种语法,文中不会介绍这些语法的功能,也不探讨这些语法的好坏,只重点介绍 TypeScript 是如何实现这个语法的功能的。这篇系列文章可以帮助你在没学过编译原理之类的书的前提下,真正地学会编译相关的知识。但你必须先做好两点准备:1. 检查这个页面的网址,这篇系列文章由徐林迪(xuld)原创,前三篇在博客园首发,禁随意转载、偷爬,如果需要引用文章内容,请直接链接到这篇文章的地址,不要复制内容。2. TypeScript 核心编译器截止目前一共有 8 万行以上代码,GIT 源码仓库 超过 1 G,学习 TypeScript 原理是一个漫长的过程,不是几天就可以搞定的,你需要静下心来,而且原理中包含了大量抽象的逻辑,如果你不打算用太久时间,请尽早放弃。

如果有天你问一个“高手”,TypeScript 是怎么写的,“高手”就回复你一句“你去看编译原理的书,比如某某动物书”,那我可以很肯定地告诉你,你的那位“高手”也不懂 TypeScript 的原理。要实现一个 TypeScript ,确实需要一些编译原理的知识,但并不多,TypeScript 的核心是类型分析、流程分析、ES5 语法转换,而这些东西,在传统的 C 编译器之类的领域都是不存在的。所以你去读那些教你怎么写 parser,怎么编译成机器码的传统编译原理的书,是远远不够的。

阅读全文 »

国外前端会考察哪些问题?js函数、系统设计、TS类型体操的用法,大大拓宽了我的眼界,去思考和实战更加相关的问题吧,输入输出考验了对js语法的掌握程度,值得多次学习。虽然有的实际使用中不会碰到,但至少可以养成遇到问题查文档的好习惯。

阅读全文 »

webpack是最常见的前端打包工具,功能丰富,在ts-axios库的开发中,我采用了Rollup作为打包工具,相比之下更为轻便,特别是看到Vue也是用了Rollup作为打包工具,感觉非常有意思,想要系统学习Rollup这个工具,在上手操作以后又有了新的认识。

阅读全文 »

很快,又要到了秋招时刻,说实话校招刷题还是很重要的。牛客网这个前端笔试题库,可以说这75题中的前60题道是前端最基础的了,也是考察的东西比较杂,后面的15题更侧重实战,对于巩固基础还是有帮助的的。做完题回顾一上午就可以过完一遍。现在我结合我的答案和参考的其他人的答案,在这里做一个总结,方便自己以后复习,也帮后来人少走点弯路。

阅读全文 »

实习前临时抱佛脚研究下编译原理,其实前端近些年不少重要的新技术其实是跟编译原理关系非常大。React在实现上有两个亮点:JSX、Virtual Dom,其中JSX就跟编译原理息息相关。想要提高自己的层次,未来定会好好补补基础。

阅读全文 »

俗话说:检验学习成果最直接的方式就是造轮子。网上搜索一番,发现前后端交互神器axios造的人挺多的,并且提供了很多重构思路,为了能够站在巨人的肩膀上,并且axios常用,易于理解,那就是它啦,使用TypeScript重构axios。重构之前,我们需要简单地做一些需求分析,看一下我们这次重构需要支持哪些 feature(特性)。

特性

  • 在浏览器端使用 XMLHttpRequest 对象通讯
  • 支持 Promise API
  • 支持请求和响应的拦截器
  • 支持请求数据和响应数据的转换
  • 支持请求的取消
  • JSON 数据的自动转换
  • 客户端防止 XSRF

此外,我们还会支持一些 axios 库支持的一些其它的 feature。这里要注意的,我们这次重构不包括 axios 在 Node 中的实现,因为这部分我们在平时项目中应用的很少,还涉及到很多 Node.js 的知识。

那么接下来我们就开始初始化项目吧!

项目发布在我的githubgitee上了,可以直接看README.md说明部分使用。想要看分页文档可以参考TypeScript 从零实现 axios,这个使用了Vue-press框架,看起来更舒服。

阅读全文 »