TypeScript交叉类型的用法及使用场景

更新时间：2026年01月15日 10:37:31 作者：新节

TypeScript交叉类型使用&符号将多个类型组合成一个新类型,要求包含所有参与类型的成员,本文就来介绍一下交叉类型的基本语法、特点及使用场景,感兴趣的可以了解一下

1. 基本的交叉类型

1.1 语法

交叉类型的语法非常简单，使用 & 符号将多个类型组合在一起。例如：

type Person = {
  name: string;
  age: number;
};

type Address = {
  street: string;
  city: string;
};

type PersonWithAddress = Person & Address;

const personWithAddress: PersonWithAddress = {
  name: "Alice",
  age: 30,
  street: "123 Main St",
  city: "Wonderland"
};

console.log(personWithAddress);

在上面的例子中，PersonWithAddress 是一个交叉类型，它将 Person 和 Address 类型组合成一个新的类型。这个新的类型需要同时包含 Person 类型的 name 和 age 属性，还需要包含 Address 类型的 street 和 city 属性。

1.2 交叉类型的特点

所有属性都必须存在：交叉类型会合并所有参与的类型，所以最终的类型需要拥有所有字段。换句话说，交叉类型是“并集”的概念，但更严格地要求所有类型的成员都存在。
如果有同名属性，则要求类型一致：如果两个类型有相同的属性，交叉类型要求这些属性具有相同的类型。

例如：

type A = { x: number };
type B = { x: number; y: string };

type C = A & B; // 合并类型

const obj: C = { x: 1, y: "Hello" }; // 合法

如果 A 和 B 类型中的 x 有不同的类型，编译时会报错。

type A = { x: number };
type B = { x: string }; // 类型冲突

type C = A & B; // 错误：类型 "number" 与 "string" 不兼容

const obj: C = { x: "Hello" }; // 错误

2. 使用交叉类型的场景

2.1 混合多个接口

交叉类型非常适合合并多个接口，生成一个包含所有属性的对象。

interface Car {
  brand: string;
  speed: number;
}

interface Features {
  hasAirbags: boolean;
  isElectric: boolean;
}

type ElectricCar = Car & Features;

const tesla: ElectricCar = {
  brand: "Tesla",
  speed: 120,
  hasAirbags: true,
  isElectric: true
};

在这个例子中，ElectricCar 类型是 Car 和 Features 的交叉类型，包含了所有这两个接口的属性。

2.2 混合函数类型

交叉类型还可以用于合并函数类型。你可以将多个函数类型合并为一个类型，这样该函数既能执行某些操作，也能返回其他类型的值。

type Greet = (name: string) => string;
type Age = (age: number) => number;

type GreetAndAge = Greet & Age;

const greetAndAge: GreetAndAge = (input: any) => {
  if (typeof input === "string") {
    return `Hello, ${input}`;
  } else if (typeof input === "number") {
    return input + 1;
  }
};

console.log(greetAndAge("Alice")); // 输出: Hello, Alice
console.log(greetAndAge(25)); // 输出: 26

在这个例子中，GreetAndAge 是一个交叉类型，既包含了 Greet 类型（接收一个 string 类型的参数并返回一个 string）又包含了 Age 类型（接收一个 number 类型的参数并返回一个 number）。

2.3 用于联合类型的扩展

交叉类型也可以和联合类型配合使用，用于扩展现有的类型。例如，假设你有一个基础类型和多个变体，你可以通过交叉类型将它们结合起来。

type Shape = { color: string };

type Circle = Shape & { radius: number };
type Square = Shape & { sideLength: number };

const circle: Circle = { color: "red", radius: 10 };
const square: Square = { color: "blue", sideLength: 5 };

通过交叉类型，可以将基础 Shape 类型与 Circle 或 Square 类型结合，确保每个形状都拥有 color 属性和各自特定的属性。

3. 交叉类型与联合类型的对比

交叉类型与联合类型非常相似，但它们有根本的不同：

交叉类型 (&)：要求同时具备多个类型的所有属性，即合并所有类型的特征。
联合类型 (|)：要求符合多个类型中的至少一个，代表多个可能的类型选择。

3.1 交叉类型

type A = { name: string };
type B = { age: number };
type C = A & B; // 需要同时具备 A 和 B 的属性

const person: C = { name: "Alice", age: 30 };

3.2 联合类型

type A = { name: string };
type B = { age: number };
type C = A | B; // 只需要满足 A 或 B 中的一个类型

const person1: C = { name: "Alice" }; // 合法
const person2: C = { age: 30 }; // 合法

3.3 总结

交叉类型：所有参与的类型的成员都必须出现在最终类型中。
联合类型：类型可以是多个类型中的一个。

4. 使用交叉类型的高级应用

4.1 在函数返回值中使用交叉类型

交叉类型还可以应用于函数的返回值，使得函数可以返回多个类型的组合结果。

function createPerson(name: string, age: number): Person & Address {
  return {
    name,
    age,
    street: "123 Main St",
    city: "Wonderland"
  };
}

const personWithAddress = createPerson("Alice", 30);
console.log(personWithAddress.name); // Alice
console.log(personWithAddress.street); // 123 Main St

4.2 交叉类型与泛型

交叉类型与泛型结合使用时非常有用，允许你灵活组合多个类型，同时提供类型安全。

function merge<T, U>(a: T, b: U): T & U {
  return { ...a, ...b };
}

const merged = merge({ name: "Alice" }, { age: 30 });
console.log(merged); // 输出: { name: "Alice", age: 30 }

在这个例子中，merge 函数返回的是 T 和 U 的交叉类型，意味着返回的对象将同时具有两个类型的属性。

到此这篇关于TypeScript交叉类型的用法及使用场景的文章就介绍到这了,更多相关TypeScript交叉类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

实例讲解javascript实现异步图片上传方法
给大家详细讲解一下如何通过javascript写出异步图片上传，并且把实例代码给大家分享了下，有兴趣的读者们测试一下吧。
2017-12-12
js跨域访问示例(客户端/服务端)
有关跨域访问的的文章，可以搜到很多，基本上大同小异，下面有个不错的访问示例，大家可以参考下
2014-05-05
JavaScript定义变量和变量优先级问题探讨
这篇文章主要介绍了JavaScript定义变量和变量优先级的问题探讨,变量的定义还有这么讲究吗,不错,看完本文相信你会有一定的收获,需要的朋友可以参考下
2014-10-10
js实现透明度渐变效果的方法
这篇文章主要介绍了js实现透明度渐变效果的方法,涉及javascript实现渐变效果的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
Ionic2开发环境搭建教程
这篇文章主要为大家详细介绍了Ionic2开发环境的搭建教程，文中步骤介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
5款Javascript颜色选择器
5款JavaScript颜色选择器(含jQuery插件)。
2009-10-10
JavaScript实现瀑布流布局的3种方式
这篇文章主要为大家详细介绍了JavaScript实现瀑布流布局的3种方式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
js实现鼠标滑动到某个div禁止滚动
这篇文章主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JavaScript中的LHS和RHS分析详情
这篇文章主要介绍了JavaScript中的LHS和RHS分析详情，LHS是赋值操作即可以看做是在往内存中存储值，而RHS是取值操作，它是从内存中进行检索，下文更多相关资料介绍需要的小伙伴可以参考一下
2022-04-04
xmlHTTP返回值重编码的优化
xmlHTTP返回值重编码的优化...
2006-11-11