TypeScript 是 JavaScript 的強型別超集,為 JavaScript 開發帶來了強大的型別檢查功能。這些功能可以幫助開發人員儘早發現錯誤並編寫更易於維護的程式碼。 TypeScript 的強大功能包括 聯合類型 和 交集類型。這些類型在定義複雜類型時提供了靈活性和精確性,這對於大規模應用程式至關重要。
本文的目標是解釋 TypeScript 中並集和交集類型的概念。我們將深入研究一個範例來說明如何組合這些類型來創建更具表現力的類型定義。讀完本文後,您應該對如何在 TypeScript 專案中有效使用這些類型有深入的了解。
好吧,事不宜遲,讓我們開始吧。
我下面有這個表情包。
https://www.picturepunches.com/meme/317642
談話藝術中有一條不言而喻的規則:永遠不要問女人的年齡和永遠不要問男人的薪水。但讓我們加大賭注,讓這件事變得更有趣。想像第三條規則:永遠不要詢問編碼員未完成的項目數量。有些秘密最好留在陰影中——因為無論是年齡、收入還是廢棄的副業項目,答案往往伴隨著你可能還沒準備好聽的故事。
好的,讓我們專注於前兩項:男人和女人。
Dont ask 1 | Dont ask 2 | Should ask 1 | Should ask 2 | |
---|---|---|---|---|
Man | Salary | Relationship | Address | Full name |
Woman | Age | Weight | Address | Full name |
在 TypeScript 中我們可以建立這樣的型別:
type Person = { gender: 'man' | 'woman', dontAsk: 'salary' | 'relationship' | 'age' | 'weight' };
如果我們基於 Person 類型建立對象,就會出現問題
const person1: Person = { gender: 'man', dontAsk: 'weight', }; const person2: Person = { gender: 'woman', dontAsk: 'salary', };
以上兩個物件都不會顯示任何類型錯誤。
Intersection 和 Union 類型來解決這個問題。
A 聯合型別 允許變數是多種型別之一。在我們的範例中:
{ gender: 'man', dontAsk: 'salary' | 'relationship' } | { gender: 'woman', dontAsk: 'weight' | 'size' }
這部分類型定義指出,Person 可以是以下兩種形狀之一:
這種靈活性在處理多種形式的資料時非常有用。
交叉點類型將多種類型組合為一種。交集類型的變數必須滿足所有組成類型。在我們的範例中:
& { address?: string, fullName: string }
這部分類型定義規定 Person 必須具有:
完整的 Person 類型結合了並集和交集類型:
type Person = ({ gender: 'man', dontAsk: 'salary' | 'relationship' } | { gender: 'woman', dontAsk: 'weight' | 'age' }) & { address?: string, fullName: string };
Person 物件必須與聯合類型之一匹配,並且還必須包含交集類型中定義的屬性。以下是一些有效的 Person 物件:
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 不要求年齡,則會顯示錯誤。在內建了 TypeScript 支援的 Visual Studio Code 中,當我們將滑鼠停留在物件上時,它會顯示錯誤。
在 TypeScript 中,聯合類型允許變數是多種類型之一,而交集類型將多種類型組合為一種。透過理解和使用這些類型,您可以編寫更靈活、更健壯的 TypeScript 程式碼。 Person 類型範例說明如何組合這些概念來建立複雜且精確的類型定義。
有效使用 TypeScript 可以顯著提高程式碼的可維護性。當新開發人員加入您的團隊時,清晰的類型定義可以減少冗長解釋的需要。團隊可以專注於討論專案的流程和目標,從而提高生產力和協作,而不是破解程式碼。
以上是TypeScript 中的並集和交集類型的詳細內容。更多資訊請關注PHP中文網其他相關文章!