likes
comments
collection
share

TS 完全指南之深入类型更多用法(二)

作者站长头像
站长
· 阅读数 30

interface 和 type

基本使用

  • 使用 interface 定义接口,使用 type 定义类型别名
  • 都可以约束对象的结构
TS 完全指南之深入类型更多用法(二)

区别

  1. interface 只描述对象,type 则可以描述所有数据
  2. interface 使用 extends 来实现继承,type 使用 & 来实现交叉类型
  3. interface 会创建新的类型名,type 只是创建类型别名,并没有创建新类型
  4. interface 可以重复声明扩展,type 则不行(别名是不能重复的)
TS 完全指南之深入类型更多用法(二) TS 完全指南之深入类型更多用法(二)

索引签名(Index Signatures)

TS 完全指南之深入类型更多用法(二)

接口继承

  • 接口和类继承相同,都是使用 extends 关键字
  • 接口是支持多继承的(类不支持多继承)
TS 完全指南之深入类型更多用法(二)

接口实现

  • 定义的接口可以被类实现
  • 之后如果需要传入接口的地方,同样也可以将类实例传入
  • 这就是面向接口开发
TS 完全指南之深入类型更多用法(二)

函数

基本使用

  • 我们可以编写函数类型的表达式(Function Type Expressions) ,来表示函数类型
TS 完全指南之深入类型更多用法(二)

更多细节使用

TS 完全指南之深入类型更多用法(二)

调用签名(Call Signatures)

  • 函数除了被调用,也可以有自己的属性值
TS 完全指南之深入类型更多用法(二)

构造签名 (Construct Signatures)

  • 函数也可以使用 new 操作符去当作构造函数
  • 使用构造签名,即在调用签名前面加 new 关键词
TS 完全指南之深入类型更多用法(二)

this

  • TS 中默认情况下如果没有指定 this 的类型,this 是 any 类型
  • 我们可以在函数第一个参数声明 this 的类型,函数调用传入的参数从第二个开始接收
TS 完全指南之深入类型更多用法(二)
  • ThisParameterType 提取函数类型的 this 参数类型,如果没有 this 参数则返回 unknown
  • OmitThisParameter 移除函数类型 this 参数类型,返回当前函数类型
TS 完全指南之深入类型更多用法(二)
  • ThisType 指定所在对象的所有方法里面 this 的类型
TS 完全指南之深入类型更多用法(二)

联合类型、交叉类型、函数重载

联合类型(Union Type)和重载

  • TS 允许我们使用多种运算符,从现有类型中构建新类型
  • 联合类型就是一种组合类型的方式,多种类型满足一个即可,使用 | 符号,其中每个联合的类型被称之为联合成员(union's members)
  • 函数重载则是我们可以去编写不同的重载签名(overload signatures) 表示函数可以不同的方式调用,一般写两个及以上的重载签名,再编写一个通用函数的实现

假如现在有个函数,可以传入字符串或数组,以获取长度

方式一:联合类型

TS 完全指南之深入类型更多用法(二)

方式二:函数重载

TS 完全指南之深入类型更多用法(二)

开发中,尽量使用联合类型,更易阅读


  • 交叉类型则是满足多个类型的条件,使用 & 符号
  • 例如 type MyType = number & string,满足一个既要是 number 类型,也要是 string 类型的值,显然没有值满足,则会交叉成 never 类型
  • 进行交叉时,通常是使用对象类型交叉
TS 完全指南之深入类型更多用法(二)

类型、非空、常量断言

  • 类型断言 as,当 TS 无法获取到具体的类型信息,就需要使用类型断言(Type Assertions)
  • 它可以允许我们断言成更具体或者不太具体的(比如any)的类型
TS 完全指南之深入类型更多用法(二)
  • 非空类型断言 !,当我们确定参数有值,需要跳过 TS 对它的检测的时候可以使用
TS 完全指南之深入类型更多用法(二)
  • 常量断言 as const,将类型尽量收窄到字面量类型,如果用在对象后面,相当于给对象里面每个成员加上 readonly并收窄
TS 完全指南之深入类型更多用法(二)

字面量类型

  • 其实使用 JS 定义的值不仅可以做值,还可以当做 TS 的类型
TS 完全指南之深入类型更多用法(二)

字面量推理

TS 完全指南之深入类型更多用法(二)

类型收窄(Type Narrowing)

  • 由一个更宽泛的类型变为更小的类型,缩小声明时的类型路径(Type Narrowing),比如 number | string -> number
  • 而我们可以通过类型保护(type guards) 来收窄类型
  • 常见的类型保护有
    • typeof
    • Switch 或者一些相等运算符(=== 、 !==)来表达相等性
    • instanceof
    • in
TS 完全指南之深入类型更多用法(二) TS 完全指南之深入类型更多用法(二) TS 完全指南之深入类型更多用法(二)