TypeScript中的交集型別是什麼?


在本教程中,我們將學習TypeScript中的交集型別。

藉助TypeScript,我們可以混合各種型別以產生更全面和有效的用例。通過了解其背後的設計理念,您可以學習如何在TypeScript中更有效地構建聯合型別和交集型別。

在TypeScript中,一個稱為“交集型別”的概念有效地使我們能夠組合不同的型別。

我們可以使用交集型別組合不同的型別定義並利用現有的型別定義。儘管TypeScript中的交集型別和聯合型別相似,但它們的使用方式卻大相徑庭。組合不同型別為一體的型別稱為交集型別。這使您可以組合多種型別以產生具有所有必需屬性的單個型別。此型別的物件將包含每個提供的型別中的成員。交集型別使用“&”運算子建立。

避免讓“交集”一詞誤導您,將數學集合與邏輯混淆。當兩種型別在TypeScript中相交時,交集型別將繼承兩種相交型別的特性。在組合具有不同型別的同名屬性的型別時,請務必小心。

語法

我們可以編寫以下語法在TypeScript中使用交集型別。

type variable_3 = variable_1 & variable_2;
let var: variable_3; // All of the attributes from variable_1 and variable_2 apply to the variable var.

正如我們在上面的語法中看到的,這裡我們將兩個變數(即variable_1和variable_2)相交,並將值儲存在variable_3中。之後,variable_3的屬性儲存在var中。

示例

正如我們在下面的示例中看到的,這裡我們建立了兩個名為“Book”和“Author”的介面。現在在Book內部,我們建立了兩個欄位,名為“book_id”,型別為數字,名為“book_name”,型別為字串。在Author內部,我們也建立了兩個欄位,名為“author_id”,型別為數字,名為“author_name”,型別為字串。接下來,我們將Book和Author介面相交併將其儲存到intersected_types中。最後,從建立的交集型別的物件中檢索值。

interface Book {
   book_id: number
   book_name: string
}

interface Author {
   author_id: number
   author_name: string
}

type intersected_type = Book & Author

let intersected_type_object1: intersected_type = {
   book_id: 101,
   book_name: 'Typescript is Awesome',
   author_id: 202,
   author_name: 'Tutorialspoint!',
}

console.log('Book Id: ' + intersected_type_object1.book_id)
console.log('Book name: ' + intersected_type_object1.book_name)
console.log('Author Id: ' + intersected_type_object1.author_id)
console.log('Author name: ' + intersected_type_object1.author_name)

編譯後,它將生成以下JavaScript程式碼:

var intersected_type_object1 = {
   book_id: 101,
   book_name: 'Typescript is Awesome',
   author_id: 202,
   author_name: 'Tutorialspoint!'
};
console.log('Book Id: ' + intersected_type_object1.book_id);
console.log('Book name: ' + intersected_type_object1.book_name);
console.log('Author Id: ' + intersected_type_object1.author_id);
console.log('Author name: ' + intersected_type_object1.author_name);

輸出

以上程式碼將產生以下輸出:

Book Id: 101
Book name: Typescript is Awesome
Author Id: 202
Author name: Tutorialspoint!

如使用者在輸出中看到的,兩個不同介面的所有值都被組合並顯示。

交集型別是結合律和交換律的

交換律表示方程式的因子可以自由重新排列,而不會改變方程式的結果。

交換律:(A & B) = (B & A)

結合律斷言在運算中更改整數的分組方式不會影響方程式的解。

結合律:(A & B) & C = A & (B & C)

當我們交叉兩個或多個型別時,它們的順序無關緊要。使用'typeof'運算子來驗證相交物件的屬性也是相同的,無論專案如何相交或按什麼順序。

示例

正如我們在下面的示例中看到的,這裡我們建立了三個名為“Student”、“Class”和“Subject”的介面。現在在Student內部,我們建立了兩個欄位,名為“student_id”,型別為數字,名為“sudent_name”,型別為字串。在“Class”例項內部,我們也建立了兩個欄位,名為“class_id”,型別為數字,名為“class_name”,型別為字串。在“Subject”例項內部,我們也建立了兩個欄位,名為“subject_id”,型別為數字,名為“subject_name”,型別為字串。

接下來,我們使用結合律將Book、Author和Subject介面相交,並將其儲存到intersected types中。之後,從建立的交集型別的物件中檢索值。最後,我們使用typeof運算子檢查物件並將其記錄到控制檯中。

interface Student {
   student_id: number
   student_name: string
}

interface Class {
   class_id: number
   class_name: string
}

interface Subject {
   subject_id: number
   subject_name: string
}

type intersected_type_1 = (Student & Class) & Subject
type intersected_type_2 = Student & (Class & Subject)

let intersected_type_object1: intersected_type_1 = {
   student_id: 101,
   student_name: 'Typescript',
   class_id: 10,
}

let intersected_type_object2: intersected_type_2 = {
   student_id: 102,
   student_name: 'Typescript2',
   class_id: 11,
}

console.log(typeof intersected_type_object1 === typeof intersected_type_object2)

編譯後,它將生成以下JavaScript程式碼:

var intersected_type_object1 = {
   student_id: 101,
   student_name: 'Typescript',
   class_id: 10
};
var intersected_type_object2 = {
   student_id: 102,
   student_name: 'Typescript2',
   class_id: 11
};
console.log(typeof intersected_type_object1 === typeof intersected_type_object2);

輸出

以上程式碼將產生以下輸出:

true

如使用者在輸出中看到的,物件的屬性都相同,顯示了真實值。

更新於:2022年12月19日

1000+ 瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.