TypeScript 入门(下) | 青训营笔记

90 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第14天

TypeScript 入门(下)

一、高级类型

联合/交叉类型

⭐ 为书籍列表编写类型

image.png

⭐ 类型声明繁琐,存在较多重复

image.png

⭐ 联合类型: IA | lB;联合类型表示一个值可以是几种类型之一。

⭐ 交叉类型: IA & IB;多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

image.png

类型保护与类型守卫

image.png image.png image.png image.png

实现高级类型

image.png image.png image.png

函数返回值类型

image.png image.png

二、工程应用

浏览器Web

  1. 配置 webapack loader 相关配置
  2. 运行 webpack 启动/打包
  3. 配置 tsconfig.js 文件
  4. loader 处理 ts 文件时,会进行编译与类型检查 image.png

⭐ 相关loader

  1. awesome-typescript-loader
  2. babel-loader

Node.Js

⭐ 使用 TSC 配置

  1. 安装Node与npm
  2. 使用npm安装tsc
  3. 配置tsconfig.js文件
  4. 使用tsc运行编译得到js文件
image.png