TypeScript - 交叉型別



在 TypeScript 中,交叉型別將多個型別組合成一個。雖然 TypeScript 中的交叉型別和聯合型別相似,但它們的使用方式卻大不相同。將不同型別組合成一個的型別稱為交叉型別。這使您可以組合多個型別以生成具有所有必需屬性的單個型別。此型別的物件將包含每個提供的型別中的成員。交叉型別使用“&”運算子建立。

當 TypeScript 中的兩種型別相交時,交叉型別將繼承兩個相交型別的特徵。在組合具有相同屬性名稱但型別不同的型別時要小心。

語法

我們可以在 TypeScript 中編寫以下語法來建立交叉型別。

type intersepted_Type = Type1 & Type2;

示例

在下面的示例中,我們建立了兩個名為“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!

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

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

交換律表明,方程式的因子可以在不改變方程式結果的情況下自由重新排列。

commutative property:  (A & B) = (B & A)

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

associative property: (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

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

廣告