18.【TypeScript 教程】交叉类型

本节起开始介绍 TypeScript 高级类型,依次是交叉类型、联合类型、类型别名、索引类型、映射类型、条件类型。

本节介绍交叉类型的语法和应用,跟数学集合里的相交不一样,TypeScript 的交叉类型并不是指每个类型的交集,& 的意思理解成 and ,A & B 表示同时包含 A 和 B 的结果。

1. 解释

交叉类型是将多个类型合并为一个类型。

这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

语法为:类型一 & 类型二

2. 简单示例

先来看一个简单示例:

interface Admin {
  id: number,
  administrator: string,
  timestamp: string
}

interface User {
  id: number,
  groups: number[],
  createLog: (id: number) => void,
  timestamp: number
}

let t: Admin & User

t!.administrator // 合法 Admin.administrator: string
t!.groups        // 合法 User.groups: number[]
t!.id            // 合法 id: number
t!.timestamp     // 合法 timestamp: never

代码解释: 交叉类型 Admin & User 包含了原类型的所有属性,但是要注意两个接口都拥有 id 和 timestamp 属性,且 id 类型相同,timestamp 类型不同。在此交叉类型中,timestamp 属性类型冲突,不可被赋值。

3. 应用场景

我们大多是在混入(Mixins)或其它不适合典型面向对象模型的地方看到交叉类型的使用。下面是合并两传入对象的成员属性的例子:

function extend<T, U>(first: T, second: U): T & U {
  for(const key in second) {
    (first as T & U)[key] = second[key] as any
  }
  return first as T & U
}

函数返回结果的类型是两个对象的交叉类型。调用 extend 函数,实现两个对象的合并:

class Person {
  constructor(public name: string) { }
}
class ConsoleLogger {
  log() {}
}

let jim = extend(new Person('Jim'), new ConsoleLogger())
let n = jim.name
jim.log()

代码解释:

通过 extend() 函数合并了两个类的实例,我们知道交叉类型是 and 的意思,那么合并后即可访问 Person 类实例的 name 属性,也可以调用 ConsoleLogger 类实例的 log() 方法。

4. 小结

本节介绍了高级类型中的交叉类型,把 & 的意思理解成 and 即可轻松记忆,下一节开始介绍联合类型。

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

红薯不甜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值