深入浅出 Typescript | 青训营笔记

55 阅读2分钟

今天学习的是深入浅出 Typescript,以下是课程结构。

  • 为什么要学 TS
  • TS 基础
  • TS 进阶
  • 实战&工程向

image.png

image.png

image.png

TS 基础

TS 的基础类型如下所示:

  • boolean、number、string
  • 枚举 enum
  • any、unknown、void
  • never
  • 数组类型[]
  • 元祖类型 tuple

TS 的函数类型如下所示:

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

TS 的 interface

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

特点:

  • 可选属性:?
  • 制度属性:readonly
  • 可以描述函数类型
  • 可以描述自定义属性

总结:接口非常灵活 duck typing

TS 的类

定义:写法和 JS 差不多,增加了一些定义

特点:

  • 增加了 public、private、protected修饰符
  • 抽象类
    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface 约束类,使用 implements 关键字

image.png

  • 联合类型 |
  • 交叉类型 &
  • 类型断言
  • 类型别名
    • 定义:给类型起个别名

    • 相同点:

      • 都可以定义对象或函数
      • 都允许继承
    • 差异点:

      • interface 是 TS 用来定义对象,type 是用来定义别名方便使用
      • type 可以定义基本类型,interface 不行
      • interface 可以合并重复声明,type 不行

image.png

image.png

image.png

  • typeof:获取类型
  • keyof:获取所有键
  • in:遍历枚举类型
  • T[k]:索引访问
  • extends:范型约束

image.png

Typescript 实战

image.png

image.png

为什么学 TS:

  • TS 是 JS 的超集
  • 增强了类型安全
  • 提高生产力

TS 基础:

  • 基础类型
  • 函数类型
  • interface
  • Class 类

TS 进阶:

  • 高级类型
  • 泛型
  • 泛型工具类型

TS 实战:

  • 声明文件
  • 后端接口约束