TypeScript进阶 | 青训营笔记

谨慎谦虚
59 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

本课重点内容

主要是涉及到一些TypeScript的高级特性以及前端工程化方案

课堂重点概览

高级特性

联合交叉类型

image.png

存在问题：类型声明繁琐，不同类有着不同的属性，那么就要定义多个类。代码可扩展度很低

TS的解决方案：

image.png

如图是一个嵌套的。

先从内部看，内部类型用|链接，表示history、stroy这两块内容为或的关系，两者只能取一块作为类型。 -->|即是联合

外层的&表示多种类型联合在一起,也就是一本书必须要有author和一种type（由history、story连接后形成的） -->&即是交叉

有点类似于C语言的联合 访问联合类型时，为了保证程序安全，仅能访问联合类型中的交集部分

类型守卫

原始问题：

image.png

TS解决方案：

  1. 使用类型谓词

image.png

使用arg is 类型的语法可以告诉编译器当函数返回值为true时，那么这个arg一定是IA类

  1. 使用typeof或者instanceof

image.png

  1. 当然也可以这样自动推导

image.png

其他

image.png

前端工程化方案

  1. webpack

通过这个工具进行构建web网页，将项目运行在网页之中

image.png

  1. nodejs

通过node工具，将项目以nodejs形式编译，直接运行在本地node中，无需运行在nodejs里面。

编译过程：

image.png

avatar
文章
阅读
粉丝