本篇是TypeScript入门的最后一篇，主要分析了TypeScript高级里的映射类型、模板字面量类型和条件类型。最后汇总了一些TS的学习书籍以及在线学习资源以便后续的继续学习。(提示：图片代码里的注释可以认真看一下哟！)
『前期回顾』
前言
映射类型(Mapped Type)
映射类型是一种创建对象类型的方法
最简单的书写格式
{[ K in P ] : T}
- K是一个标识符，映射为 P 的每一个子类型；
- P 属性名的集合
- T为数据类型
简单示例
可以看到， 类型遍历K，依次取了Keys里面的值，并且统一赋为string类型，就像JS的for in遍历对象的key；
实例1
将一个已知的类型每个属性都变为可选的
- 把
Person传给Optional keyof T可以获取到Person里面的所有key（keyof 知识点）- 然后在获取到具体的类型，赋值，就完整的复制了一个Person
- 再在属性名后面加上
?，就变成可选的了（如果在前面加readonly就可以变成只读的版本）
实例2
怎么把上面的结果的转回去？即把所有的可选再去掉
- ？可选，-？移除可选
- readonly 只读，-readonly移除只读
总结：将映射类型+ keyof + typeof +可选修饰符+只读修饰符结合起来
什么是Equal？可以到预备知识篇看一下👉现在去
进一步理解
对比:
在值空间创建对象
{hello:123, world: abc'}
在类型空间创建对象类型
{hello:number, world: string}
代码
对比
用映射类型+条件类型创建类型
{hello:number, world: string}
用列举的方式创建对象类型
{hello:number, world: string}
对比:
值空间
- 函数参数和默认值
- for-in遍历
- if-else判断
类型空间
- 泛型参数和默认值
- key-in遍历
- 条件类型判断
了什么是【值空间】和【类型空间】？，到预备知识篇复习一下👉现在去
模板字面量类型(TS4.1)
模板字面量类型是在TS4.1引入的。通过它我们可以更方便地创建字符串字面量类型。 语法与JS中的模板字符串相同。
对比
模板字符串VS模板字面量
如果模板中包含联合类型,
- TS会先计算类型集合的笛卡尔乘积,
- 得到一系列有序对,
- 然后将有序对依次带入模板计算出字面量类型。
- 所有字面量类型联合起来就是最终的类型。
TS对这个集合尺寸上限是100000(十万)
条件类型(TS2.8)
条件类型是在TS2.8时引入的。简单理解，条件类型就是通过判断两个类型之间的关系, 根据判断结果返回不同类型。语法和三目运算符( X ? A:B )一样
对比
三目运算符 vs 条件类型
条件类型高级话题:
- 条件类型中的分配( Distributive Conditional Types )
- infer关键字
UnionToIntersection<U>- 型变Variance
常用工具类型
像我们上面【映射类型】案例实现的就是工具类型里面的Partial、Required、Readonly
TypeScript资源
书籍
《TypeScript编程》
- 特点:全面
《深入理解TypeScript》
- 特点:深入
《高效TypeScript》/《Effective TypeScript》
- 特点:指导性、原则性
《TypeScript类型编程》/《Programming with Types》
- 特点:着重TS类型系统
在线资料
- 通读;
- 通读;
- 重点Handbook，关注What's New
-
通读
-
不懂就问
-
提问时附上Playground链接
总结
类比: 可以认为TS的类型系统本身是一个用来"操作、创建"类型的“语言”
- 列举←→顺序执行
- 映射类型←→循环
- 条件类型←→条件判断
JS中操作的是各种值，这些值有对应的各种运算
TS中操作的是类型，类型是集合，集合有集合的运算
写TS是在干什么?
我们通过TS类型系统提供的这个“语言” ，精确的描述我们需要的类型。TS回报给我们的就是编译期就将问题提前暴露出来。代码更健壮、更易扩展。
碎碎念
到这里TypeScript入门就告一个段落了，本系列并没有详细的去说TS的每一个知识点，更多的是原理、概念、以及一些重要的内容。相信看完这些，再带着问题去看推荐的那些资料，很多问题都会豁然开朗！
结语
字节青训营 本节课的讲师：字节前端—王韦华
如以上有错误的地方，请在评论区中指出！
如果有收获的话，就留个赞鼓励一下吧！😘
