TypeScript 中的并集和交集類型

介紹

TypeScript 是 JavaScript 的強(qiáng)類型超集，為 JavaScript 開發(fā)帶來了強(qiáng)大的類型檢查功能。這些功能可以幫助開發(fā)人員盡早發(fā)現(xiàn)錯(cuò)誤并編寫更易于維護(hù)的代碼。 TypeScript 的強(qiáng)大功能包括 聯(lián)合類型 和 交集類型。這些類型在定義復(fù)雜類型時(shí)提供了靈活性和精確性，這對(duì)于大規(guī)模應(yīng)用程序至關(guān)重要。

本文的目標(biāo)是解釋 TypeScript 中并集和交集類型的概念。我們將深入研究一個(gè)示例來說明如何組合這些類型來創(chuàng)建更具表現(xiàn)力的類型定義。讀完本文后，您應(yīng)該對(duì)如何在 TypeScript 項(xiàng)目中有效使用這些類型有深入的了解。

好吧，事不宜遲，讓我們開始吧。

案例研究

我下面有這個(gè)表情包。

https://www.picturepunches.com/meme/317642

談話藝術(shù)中有一條不言而喻的規(guī)則：永遠(yuǎn)不要問女人的年齡和永遠(yuǎn)不要問男人的薪水。但讓我們加大賭注，讓這件事變得更有趣。想象一下第三條規(guī)則：永遠(yuǎn)不要詢問編碼員未完成的項(xiàng)目數(shù)量。有些秘密最好留在陰影中——因?yàn)闊o論是年齡、收入還是廢棄的副業(yè)項(xiàng)目，答案往往伴隨著你可能還沒準(zhǔn)備好聽的故事。

好的，讓我們關(guān)注前兩項(xiàng)：男人和女人。

在 TypeScript 中我們可以創(chuàng)建這樣的類型：

type Person = {
    gender: 'man' | 'woman',
    dontAsk: 'salary' | 'relationship' | 'age' | 'weight'
};

如果我們基于 Person 類型創(chuàng)建對(duì)象，就會(huì)出現(xiàn)問題

const person1: Person = {
    gender: 'man',
    dontAsk: 'weight',
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'salary',
};

以上兩個(gè)對(duì)象都不會(huì)顯示任何類型錯(cuò)誤。

Intersection 和 Union 類型來解決這個(gè)問題。

聯(lián)合類型

A?聯(lián)合類型?允許變量是多種類型之一。在我們的示例中：

{
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'size'
}

這部分類型定義指出，Person 可以是以下兩種形狀之一：

1. 性別為“男人”且不要問為“薪水”或“關(guān)系”的對(duì)象。
2. 性別為“女性”的對(duì)象，不要問“體重”或“年齡”。

這種靈活性在處理多種形式的數(shù)據(jù)時(shí)非常有用。

交叉口類型

交叉點(diǎn)類型將多種類型組合為一種。交集類型的變量必須滿足所有組成類型。在我們的示例中：

& {
    address?: string,
    fullName: string
}

這部分類型定義規(guī)定 Person 必須具有：

• 字符串類型的可選地址屬性。
• 字符串類型的必需 fullName 屬性。

組合并集和交集類型

完整的 Person 類型結(jié)合了并集和交集類型：

type Person = ({
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'age'
}) & {
    address?: string,
    fullName: string
};

Person 對(duì)象必須與聯(lián)合類型之一匹配，并且還必須包含交集類型中定義的屬性。以下是一些有效的 Person 對(duì)象：

const person1: Person = {
    gender: 'man',
    dontAsk: 'salary',
    fullName: 'John Doe'
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'weight',
    fullName: 'Jane Doe',
    address: '123 Main St'
};

如果定義 person1 不要求年齡，則會(huì)顯示錯(cuò)誤。在內(nèi)置了 TypeScript 支持的 Visual Studio Code 中，當(dāng)我們將鼠標(biāo)懸停在對(duì)象上時(shí)，它會(huì)顯示錯(cuò)誤。

概括

在 TypeScript 中，聯(lián)合類型允許變量是多種類型之一，而交集類型將多種類型組合為一種。通過理解和使用這些類型，您可以編寫更靈活、更健壯的 TypeScript 代碼。 Person 類型示例說明了如何組合這些概念來創(chuàng)建復(fù)雜且精確的類型定義。

有效使用 TypeScript 可以顯著提高代碼的可維護(hù)性。當(dāng)新開發(fā)人員加入您的團(tuán)隊(duì)時(shí)，清晰的類型定義可以減少冗長(zhǎng)解釋的需要。團(tuán)隊(duì)可以專注于討論項(xiàng)目的流程和目標(biāo)，從而提高生產(chǎn)力和協(xié)作，而不是破譯代碼。

以上是TypeScript 中的并集和交集類型的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！