交叉類(lèi)型的意義是讓一個(gè)類(lèi)型擁有多個(gè)類(lèi)型的特征。這個(gè)特性特別適用于當(dāng)你需要將多個(gè)不同的類(lèi)型組合成一個(gè)更復(fù)雜的類(lèi)型時(shí)。

1. 基本的交叉類(lèi)型

1.1 語(yǔ)法

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

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

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

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

例如：

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

type C = A & B; // 合并類(lèi)型

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

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

type A = { x: number };
type B = { x: string }; // 類(lèi)型沖突

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

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

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

2.1 混合多個(gè)接口

交叉類(lèi)型非常適合合并多個(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 類(lèi)型是 Car 和 Features 的交叉類(lèi)型，包含了所有這兩個(gè)接口的屬性。

2.2 混合函數(shù)類(lèi)型

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

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è)交叉類(lèi)型，既包含了 Greet 類(lèi)型（接收一個(gè) string 類(lèi)型的參數(shù)并返回一個(gè) string）又包含了 Age 類(lèi)型（接收一個(gè) number 類(lèi)型的參數(shù)并返回一個(gè) number）。

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

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

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

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

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

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

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

3.1 交叉類(lèi)型

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)合類(lèi)型

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

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

3.3 總結(jié)

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

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

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

交叉類(lèi)型還可以應(yīng)用于函數(shù)的返回值，使得函數(shù)可以返回多個(gè)類(lèi)型的組合結(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 交叉類(lèi)型與泛型

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

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 的交叉類(lèi)型，意味著返回的對(duì)象將同時(shí)具有兩個(gè)類(lèi)型的屬性。

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