Day 8 进阶型别 - Part 1

今天要来介绍Intersection、Type guard。

Intersection 型别是把两种定义好的 type 做合并,这在定义物件的时候满方便的:

type Admin = {
  name: string
  id: number
}

type Reader = {
  name: string
  visitedDate: Date
}

type libraryMember = Admin & Reader

const libraryInTc: libraryMember = {
  name: 'Claire',
  id: 0,
  visitedDate: new Date()
}

上面可以看到 type libraryMember 结合了 AdminReader 这两种 type,如果要定义 libraryMember 的物件就一定要有 nameidvisitedDate 这三种属性。这个跟 interface 的概念有点像,上面的 type 可以改成 interface,然後用继承的方式做 intersecition 型别:

interface Admin {
  name: string
  id: number
}

interface Reader {
  name: string
  visitedDate: Date
}

interface libraryMember extends Admin, Reader {}

Type Guards 通常是使用 Union 型别的时候会派上用场,Union 型别因为为变数定义了两种以上不同的型别,所以在变数使用上需要更精确的规范,以下有几种方式可以再更加确认接收到 Union 型别的变数的详细型别:

  1. 第一种是用 JavaScript 原本就有的 typeof 确认该变数是哪一种型别
type Combinable = string | number

function add(a: Combinable, b: Combinable) {
  if (typeof a === 'string' || typeof b === 'string') {
    return a.toString() + b.toString()
  }

  return a + b
}

上面可以看到当确认 ab 不是字串之後,下面 return 的 a + b 会是数字。

  1. 当不能用 typeof 确认型别时,比如说是要比对两个物件内的属性时,可以用 JavaScript 原本就有的 in 运算子,这边把上面的 libraryMember 改成 Union 型别,并且试着印出定义成 libraryMember 的物件内的 id 属性
    https://ithelp.ithome.com.tw/upload/images/20210922/20131989jLPTr43yzI.png
    可以看到 libraryInTw.id 被报错,因为 TypeScript 不确定传进 printAll 里面的到底是 Admin 还是 Reader,这时就可以使用 in 来做二次确认
    https://ithelp.ithome.com.tw/upload/images/20210922/20131989knaEolfTrc.png

  2. 第三种是 instanceof,这也是 JavaScript 原本就有的,主要是去确认传进去的参数有没有继承到 prototype chain 上面的方法,当一个变数被指定为 Union 型别且定义的是两个 classes,就可以使用 instanceof 来做确认。

今天的学习笔记就到这边,谢谢阅读。:)


<<:  Day8 开机学习 Lua - 回圈控制、迭代函数

>>:  【Day23】计数器减号按纽及测试小练习,先别偷看解答R ~ (⁎˃ᆺ˂)

[实作教学]使用Line Notify收到Dcard最新文章通知

透过官方帐号进行推播会因为人数越来越多而增加发送成本,因此 Line Notify是一个官方提供帐号...

#4 CSS Box Model, Selector, Absolute/Relative Position

CSS Box Model Frame & tag design: <div styl...

[Android Studio] -- Day 2 主题变换Theme01

前言 刚好读到layout的部分,来做之前都没试过的APP色系转换。 正文 这次利用spinner来...

D28 - 压测

开始对TiDB进行测试,测试环境如下: 服务 vcpu ram 数量 TIDB/PD 8 20G 3...

请教如何把Exchange2013 SERVER进行重启

各位帅哥美女好,小弟想请教一下如何进行Exchange整个重启,因为资料好像没有更新的样子,主管要我...