8.深入浅出TypeScript | 青训营笔记

29 阅读2分钟

深入浅出TypeScript

一、为什么要学习TS

1. TypeScript VS JavaScript

image.png

TS是JS的扩展,是超集

2. TypeScript的好处

  • 类型安全
  • 下一代JS特性
  • 完整的工具链

不仅仅是一门语言,更是生产力工具

3. TypeScript学习推荐

image.png

二、TypeScript基础

1. 基础类型

  1. boolean,number,string
  2. 枚举类型enum
  3. any,unkonwn,void
  4. never
  5. 数组类型[]
  6. 元组类型[]

2. 函数类型

定义:TS定义函数类型时要定义输入参数类型和输出类型
输入参数:参数支持可选参数和默认参数
输出函数:输出可以自动推断,没有返回值时,默认为void类型
函数重载:名称相同但参数不同们可以通过重载支持多种类型

3. interface

定义:接口是为了定义对象类型
特点:

  • 可选属性:?
  • 只读树形:readonly
  • 可以描述函数类型
  • 可以自定义属性

总结:接口非常灵活(ducking typing)

4. 类

定义: 写法与JS基本相同,增加定义
特点:

  • 增加pubic ,private, portected
  • 抽象类:

只能被继承,不能被实例化
作为基类, 抽象方法必须被子类实现

  • interface约束类,使用implements关键字

三、TypeScript进阶

1. 高级类型

  • 联合类型 |
  • 交叉类型 &
  • 类型断言(告诉编译器某个实例的具体类型)
  • 类型别名(type VS interface)
  • 定义:给类型起个别名
  • 相同点:
  1. 都可以定义对象或者函数
  2. 都允许继承
  • 差异点:
  1. interface是TS用来定义对象,type是用来定义别名方便使用;
  2. type可以定义基本类型,interface不行;
  3. interface可以合并重复声明,type不行;

3. 泛型

官方定义:
image.png

应用实例:
image.png

基本定义:
个人觉得类似于C++里面的模板
引入临时占位的变量然后进行推导:
image.png

泛型基础操作符:
image.png image.png

泛型常用工具类型:
image.png

四、TS实战

1. 声明文件

  • declare:第三方库需要类型声明文件
  • .d.ts:声明文件定义
  • @types:第三方库TS类型包
  • tsconfig.json:定义TS配置

2. 泛型约束后端接口类型

image.png

3. 课程总结

image.png