TypeScript | 青训营笔记

80 阅读1分钟

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

前端的发展、更新迭代是很快的,虽然入门容易,但是要一直走下去,就需要持续不断的学习。只有勇于挑战自己舒适区外的东西,才能不断进步。

什么是TypeScript

静态类型

  • 可读性增强:基于语法解析TSDoc,ide增强
  • 可维护性增强:在编译阶段暴露大部分错误 多人合作的大型项目中,获得更好的稳定性和开发效率

JS的超集

  • 包含于兼容所有JS特性,支持共存
  • 支持渐进式引入和升级

基本语法

基础数据类型

简单数据类型

左边JS,右边TS

image-20220805132140302

对象类型

image-20220805132325395

函数类型

image-20220805132827729

函数重载

image-20220805132941646

image-20220805133154398

数组类型

image-20220805133356537

TS补充类型

image-20220805133619971

TS范型

image-20220805134134284

image-20220805134050518

字符串,数字,字面量

image-20220805135732671

高级类型

联合/交叉类型

为书籍列表编写类型 ---》 类型声明繁琐,存在较多重复

image-20220805140042668

  • 联合类型:IA | IB; 联合类型表示一个值可以使几种类型之一
  • 交叉类型: IA & IB; 多重类型叠加到一起称为一种类型,它包含了所需的所有类型的特性

image-20220805140533665

类型保护与类型守卫

image-20220805140855481

image-20220805141126144

image-20220805141205674

image-20220805141249140

函数返回值类型

image-20220805143852275

image-20220805144001470

工程应用

浏览器Web

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

相关loader:

  • awesome-typescript-loader
  • babel-loader

NodeJs

使用TSC编译

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

code.ts ----->(TSC)-----> code.js