这是我参与「第五届青训营 」伴学笔记创作活动的第 8天✌
课堂笔记
本堂课重点内容：
通过高级类型的方式，将普通类型的解决方案进行高级化：
- 联合交叉类型
- 类型保护与类型守卫
- Merge 函数类型实现
- 函数返回值类型
- TypeScript 工程应用
详细知识点介绍
1.联合/交叉类型
- 联合类型: IA | IB;联合类型表示一个值可以是几种类型之一
- 交叉类型: IA & IB; 多种类型叠加到合并成为一种类型，它包含了所需的所有类型的特性
2.类型保护与类型守卫
在联合类型未确定之前，不能够访问联合类型中非并集的部分。
解决方法：这时我们需要根据不同的类型来做不同的操作，这时候就可以使用类型谓词，类型谓词可以协助编译器进行类型推断。
ps:"!!" 将一个其他类型转换成boolean类型，类似于Boolean()
也可以使用typeof和instanceof来进行类型保护。
来看看上一个例子：
只有当两个类型没有任何重合点的话才需要类型守卫。上一个例子就可以进行自动类型推断。
3.Merge 函数类型实现
在js中有两种方法：
-
为了保证不污染可用merge1函数实现，但实现起来复杂。
-
若两个入参sourceObj和targetObj均正确，则可直接使用merge2函数实现。
在ts中实现则需要编写两个类型进行判断，但若如果增加了target则需要联动source去除，重复维护x和y。
优雅方式：可选类型(Partial<T>)
泛型： 希望拥有一个类型，该类型传入任何一个类型之后变成了它的子集；而不是像上面定义两个类型而重复表达。
4.函数返回值类型
在传入调用函数是才能知道函数的返回类型。
infer R:
待推断类型，使用 infer 标记类型 R，就可以使用待推断的类型 R作为函数的返回值类型。
5.TypeScript 工程应用
TypeScript 工程应用分为两部分：浏览器Web和Node.js的应用。
TypeScript工程应用——Web
webpack
1.配置webapack loader相关配置
2.配置tsconfg.js文件
3.运行webpack启动 /打包
4.loader处理ts文件时，会进行编译与类型检查
相关loader（转化器）：
TypeScript工程应用——Node
课后个人总结
Q&A:
-
Q: 原子类型可以合并吗？
A: 如果仅仅把基本类型、字面量类型、函数类型等原子类型合并成交叉类型，是没有任何用处的。因为任何类型都不能满足同时属于多种原子类型。
type Useless = string & number; // 就是个never
-
Q:字面量类型是什么？
A:1 | 2, true | false, ‘click’ | ‘scroll’ | 'mousemove’被称为字面量类型，分别为数字、布尔、字符串字面量类型，可以用来约束取值只能是其中几个值中的一个。
-
Q: webpack中loader的作用是什么？
A:webpack默认只能打包处理 .js 后缀名结尾的模块，而loader可以把webpack本身不能识别的非js文件转化为其可以识别的文件，相当于一个转化器。在ts工程化应用中就可以把ts文件转化为js文件供webpack进行识别处理。
容易混淆的点：
类型保护中（原始类型保护）typeof和（类型保护）instanceof用法区别：
typeof用来判断数据的类型是否是某个原始类型（number、string、boolean、symbol）并进行类型保护
格式：
typeof a ===/!== "typename""typename"必须是 "number"， "string"， "boolean"或 "symbol"
instanceof的对象则是一个构造函数
格式： ` a instanceof "constructorName"``
需要注意的点：
泛型必须是对象，对象才有key*
