为什么要学习TypeScript

TS与JS对比

TypeScript带来了什么

• 类型安全
• 新JS特性
• 完善工具链

TypeScript基础

基本类型

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

函数类型

TS定义函数类型时要定义输入参数类型和输出类型

• 输入参数：支持可选参数和默认参数
• 输出参数：输出可以自动推断，没有返回值时默认为void
• 函数重载：函数名相同参数不同，可以通过重载支持多种类型

接口interface

用来定义对象类型

特点

• 可读属性
• 只读属性：readonly
• 可以描述数据类型
• 可以描述自定义属性

总结

非常灵活

类

定义

写法和JS差不多，只是多了一些定义

特点

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

TypeScript进阶

高级类型

• 联合类型| ：一个类型包含两个基本类型
• 交叉类型& ：是两种属性的并集
• 类型断言 ：把接口的一般属性转成具体属性
• 类型别名type：给类型起个别名

type VS interface

相同点

• 都可以定义函数或对象
• 都允许继承

差异点

• interface用来定义对象，type用来定义别名
• type可以定义基本类型，interface不行
• interface可以合并重复声明

泛型

为了代码复用性，组件需要支持多种甚至未来的数据类型，因此使用泛型来代替参数类型

基本类型

• 泛型的语法是<>里面写类型参数，一般用T表示
• 泛型的作用是临时占位，之后通过传来的类型进行推导
• 使用时两种指定类型方法
  • 调用时在<>里直接写要使用的类型作为类型定义
  • 通过TS的类型推断，自动推导类型

泛型工具类型 基础操作符

• typeof获取类型
• keyof获取所有键
• in遍历枚举类型 参考for（int i in A）
• T[K]索引访问
• extends泛型约束

TS实战

声明文件

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