快捷導(dǎo)航

TypeScript交叉類型的用法及使用場(chǎng)景

更新時(shí)間：2026年01月15日 10:37:31 作者：新節(jié)

TypeScript交叉類型使用&符號(hào)將多個(gè)類型組合成一個(gè)新類型,要求包含所有參與類型的成員,本文就來介紹一下交叉類型的基本語法、特點(diǎn)及使用場(chǎng)景,感興趣的可以了解一下

1. 基本的交叉類型

1.1 語法

交叉類型的語法非常簡(jiǎn)單，使用 & 符號(hào)將多個(gè)類型組合在一起。例如：

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 是一個(gè)交叉類型，它將 Person 和 Address 類型組合成一個(gè)新的類型。這個(gè)新的類型需要同時(shí)包含 Person 類型的 name 和 age 屬性，還需要包含 Address 類型的 street 和 city 屬性。

1.2 交叉類型的特點(diǎn)

所有屬性都必須存在：交叉類型會(huì)合并所有參與的類型，所以最終的類型需要擁有所有字段。換句話說，交叉類型是“并集”的概念，但更嚴(yán)格地要求所有類型的成員都存在。
如果有同名屬性，則要求類型一致：如果兩個(gè)類型有相同的屬性，交叉類型要求這些屬性具有相同的類型。

例如：

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

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

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

如果 A 和 B 類型中的 x 有不同的類型，編譯時(shí)會(huì)報(bào)錯(cuò)。

type A = { x: number };
type B = { x: string }; // 類型沖突

type C = A & B; // 錯(cuò)誤：類型 "number" 與 "string" 不兼容

const obj: C = { x: "Hello" }; // 錯(cuò)誤

2. 使用交叉類型的場(chǎng)景

2.1 混合多個(gè)接口

交叉類型非常適合合并多個(gè)接口，生成一個(gè)包含所有屬性的對(duì)象。

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
};

在這個(gè)例子中，ElectricCar 類型是 Car 和 Features 的交叉類型，包含了所有這兩個(gè)接口的屬性。

2.2 混合函數(shù)類型

交叉類型還可以用于合并函數(shù)類型。你可以將多個(gè)函數(shù)類型合并為一個(gè)類型，這樣該函數(shù)既能執(zhí)行某些操作，也能返回其他類型的值。

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

在這個(gè)例子中，GreetAndAge 是一個(gè)交叉類型，既包含了 Greet 類型（接收一個(gè) string 類型的參數(shù)并返回一個(gè) string）又包含了 Age 類型（接收一個(gè) number 類型的參數(shù)并返回一個(gè) number）。

2.3 用于聯(lián)合類型的擴(kuò)展

交叉類型也可以和聯(lián)合類型配合使用，用于擴(kuò)展現(xiàn)有的類型。例如，假設(shè)你有一個(gè)基礎(chǔ)類型和多個(gè)變體，你可以通過交叉類型將它們結(jié)合起來。

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 };

通過交叉類型，可以將基礎(chǔ) Shape 類型與 Circle 或 Square 類型結(jié)合，確保每個(gè)形狀都擁有 color 屬性和各自特定的屬性。

3. 交叉類型與聯(lián)合類型的對(duì)比

交叉類型與聯(lián)合類型非常相似，但它們有根本的不同：

交叉類型 (&)：要求同時(shí)具備多個(gè)類型的所有屬性，即合并所有類型的特征。
聯(lián)合類型 (|)：要求符合多個(gè)類型中的至少一個(gè)，代表多個(gè)可能的類型選擇。

3.1 交叉類型

type A = { name: string };
type B = { age: number };
type C = A & B; // 需要同時(shí)具備 A 和 B 的屬性

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

3.2 聯(lián)合類型

type A = { name: string };
type B = { age: number };
type C = A | B; // 只需要滿足 A 或 B 中的一個(gè)類型

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

3.3 總結(jié)

交叉類型：所有參與的類型的成員都必須出現(xiàn)在最終類型中。
聯(lián)合類型：類型可以是多個(gè)類型中的一個(gè)。

4. 使用交叉類型的高級(jí)應(yīng)用

4.1 在函數(shù)返回值中使用交叉類型

交叉類型還可以應(yīng)用于函數(shù)的返回值，使得函數(shù)可以返回多個(gè)類型的組合結(jié)果。

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 交叉類型與泛型

交叉類型與泛型結(jié)合使用時(shí)非常有用，允許你靈活組合多個(gè)類型，同時(shí)提供類型安全。

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 }

在這個(gè)例子中，merge 函數(shù)返回的是 T 和 U 的交叉類型，意味著返回的對(duì)象將同時(shí)具有兩個(gè)類型的屬性。

到此這篇關(guān)于TypeScript交叉類型的用法及使用場(chǎng)景的文章就介紹到這了,更多相關(guān)TypeScript交叉類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: