TypeScript 交叉类型-知识专区-汉码未来

当前位置：前端开发 > TypeScript 交叉类型

admin · 更新于 2021-08-06

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: stringt!.groups        // 合法 User.groups: number[]t!.id            // 合法 id: numbert!.timestamp     // 合法 timestamp: never代码块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

代码解释：交叉类型 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}代码块
1
2
3
4
5
6

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

class Person {
  constructor(public name: string) { }}class ConsoleLogger {
  log() {}}let jim = extend(new Person('Jim'), new ConsoleLogger())let n = jim.name
jim.log()代码块
1
2
3
4
5
6
7
8
9
10

代码解释：

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

4. 小结

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

汉码未来

TypeScript 入门教程

1. 解释

2. 简单示例

3. 应用场景

4. 小结

为什么选择汉码未来

线下面授

五人小班

技术强大

内推就业