22-小册总结
课程
1
如何阅读本小册
已学完
学习时长: 2分6秒
2
为什么说 TypeScript 的火爆是必然?
已学完
学习时长: 4分28秒
3
TypeScript 类型编程为什么被叫做类型体操?
已学完
学习时长: 9分16秒
4
TypeScript 类型系统支持哪些类型和类型运算?
已学完
学习时长: 19分27秒
5
套路一:模式匹配做提取
已学完
学习时长: 41分32秒
6
套路二:重新构造做变换
已学完
学习时长: 39分51秒
7
套路三:递归复用做循环
学习时长: 42分22秒
8
套路四:数组长度做计数
学习时长: 27分58秒
9
套路五:联合分散可简化
学习时长: 19分36秒
10
套路六:特殊特性要记清
学习时长: 36分41秒
11
类型体操顺口溜
学习时长: 27分26秒
12
TypeScript 内置的高级类型有哪些?
学习时长: 31分59秒
13
真实案例说明类型编程的意义
学习时长: 34分36秒
14
类型编程综合实战一
学习时长: 25分55秒
15
类型编程综合实战二
学习时长: 29分9秒
16
新语法 infer extends 是如何简化类型编程的
学习时长: 11分14秒
17
原理篇:逆变、协变、双向协变、不变
学习时长: 11分31秒
18
原理篇:编译 ts 代码用 tsc 还是 babel?
学习时长: 19分49秒
19
原理篇:实现简易 TypeScript 类型检查
学习时长: 47分51秒
20
原理篇:如何阅读 TypeScript 源码
学习时长: 19分27秒
21
原理篇:一些特殊情况的说明
已学完
学习时长: 12分39秒
22
小册总结
学习时长: 2分32秒
23
加餐:3 种类型来源和 3 种模块语法
学习时长: 17分6秒
24
加餐:用 Project Reference 优化 tsc 编译性能
已学完
学习时长: 4分47秒
juejin_logo copyCreated with Sketch.

TypeScript 是 JavaScript 的超集,它给 JS 添加了一套静态类型系统。

TS 的入门就是学怎么给 JS 添加类型,比如函数、class、构造器、对象等怎么加类型,这些其实文档写的很清楚了,网上也有很多相关资料。

TS 的进阶部分就是类型编程,也就是如何动态生成一些类型,这部分是 TS 最强大也是最复杂的部分,被戏称为“类型体操”,但是网上没有专门系统讲这部分的。所以我才写了这本小册,希望能把类型编程讲清楚,同时也讲下 TS 类型检查的实现原理以及怎么阅读 TS 源码。

首先我们明确了什么是类型安全,TypeScript 添加的静态类型系统就是为了保证类型安全的,把一些类型不兼容的错误提前到编译期间检查出来,提高代码的健壮性,这就是为什么大型项目必然会用静态类型的语言来写。

大家可能有写过 java 代码,会发现它的那套类型系统好像没有 TS 的这么复杂,所以我们又理了下类型系统的三个层次,支持泛型并且支持类型编程的类型系统是最复杂的,TS 的类型系统就是这样。

之后我们过了遍 TS 类型系统中的类型和支持的类型计算,其实大部分类型是和 JS 中的保持一致的,只不过扩展了 interface、enum、元组等复合类型,和 never、any、void 等特殊类型。

这些基础是告诉我们怎么声明类型的,而类型编程则是动态生成类型,对类型做增删改,比直接声明类型更高一层。

后面我们分别讲学了模式匹配(各种类型通过 infer 提取某部分类型)、重新构造(类型是不可变的,想修改只能重新构造一个新的。最主要的是通过映射类型来生成新的索引类型)、递归(类型编程里涉及到数量不确定的问题,要条件反射的想到用递归来解决)、数组长度计数(严格来说是元组长度,通过构造不同元素个数的元组再取长度的方式实现计数)、联合类型的分发特性(分布式条件类型,当联合类型作为类型参数出现在条件类型左边的时候触发),以及一些特殊的类型逻辑的讲解。

学完这些套路之后,各种类型编程逻辑我们都能写。

而且,TS 也内置了不少高级类型,我们也都过了一遍。

并且我们还通过几个例子感受了下类型编程的意义:可以动态生成一些类型,可以做更精准的类型检查和提示

之后进行了一些综合的实战,综合运用上面的套路和内置的高级类型来实现了一些复杂的类型编程逻辑。

原理篇我们学习了 TS 里比较难理解的逆变、协变、双向协变、不变等概念,型变给类型系统增加了一些灵活性,这些理论知识还是要知道的。

然后我们对比了下 babel 和 tsc 编译 ts 代码的区别:babel 不会做类型检查,但是在代码产物上更有优势,可以根据 targets 指定的环境来按需编译并且引入 polyfill。而 tsc 只能指定语言版本的 target,不会做 polyfill,代码产物会更大一些,但是类型检查必须依赖它。

两者结合的方式就是用 babel(或者 swc、esbuild 等同类编译器)来编译 ts 代码,然后用 tsc --noEmit 执行类型检查。

之后我们基于 babel 插件实现了简易的 ts 类型检查,大家不用写出来,但是可以跑下代码感受下类型检查的实现原理。

之后我们通过分布式条件类型为切入点读了 TypeScript 源码,当大家对某个类型的实现有困惑的时候,可以试着从源码找找答案。

然后对于 isEqual 等类型编程中一些比较令人困惑的点集中做了说明。

类型编程的案例还是有很多的,但是都逃不开小册里的那几个套路,这就像你会了 JS 的 if else、function、for、while 就能写各种逻辑一样,把这些基础的套路掌握好了,各种类型编程逻辑都是能写的,万变不离其宗。

希望这本小册能帮助大家掌握类型编程,成为类型体操高手。

留言
Ctrl + Enter
全部评论(21)
菜菜_1的头像
删除
反卷斗士 @ sirius
学完打卡,感谢[送心]
点赞
回复
hanxiaoxin的头像
删除
IT美食家 @ 天朝上国
打卡[呲牙]
点赞
回复
CountingStar的头像
删除
打卡
点赞
回复
Mahoushoujo的头像
删除
Madoka @ Mahoushoujo
通关撒花
点赞
1
删除
(作者)
[碰拳]
点赞
回复
Mahoushoujo的头像
删除
Madoka @ Mahoushoujo
完结打卡
点赞
回复
TheCl的头像
删除
M87 ウルトラマン
爱了爱了
点赞
回复
三郎mr的头像
删除
精品中的精品,学到了很多,感谢光神,已经被圈粉
点赞
回复
三郎mr的头像
删除
光神出品,必属精品,期待新作品
点赞
回复
自习是真的的头像
删除
前端开发
还是得有时间就反复观看,写的真的很不错[抓狂],大佬收下我的膝盖
点赞
1
删除
(作者)
[送心]。 后面还有节加餐 [吃瓜群众]
点赞
回复
cocktail0723的头像
删除
前端工程师
[赞]
点赞
回复
前端泡泡茶壶的头像
删除
前端
完结打卡
点赞
回复
0_0k的头像
删除
1
点赞
回复
借你趁早的头像
删除
前端开发工程师
完结,通篇都特别值得再仔细回味!
点赞
回复
zx143的头像
删除
bug开发攻城狮
完结撒花[玫瑰]
点赞
回复
Emma_的头像
删除
感谢光哥,两本小册连着看完了
点赞
回复
王同超的头像
删除
谢谢神光[赞]
点赞
1
删除
(作者)
[嘿哈],能看明白就行,类型编程还是比较难懂的,语法比较奇怪。
点赞
回复
小龙6666的头像
删除
前端开发 @ 伙伴密码
学完打卡![奸笑]
点赞
回复
CoderStan的头像
删除
前端开发
学完打卡,感谢[送心]
点赞
回复