TypeScript 中的交集類型

TypeScript 中的交集類型

本文介紹了 TypeScript 中的交集類型。

YouTube Video

TypeScript 中的交集類型

在 TypeScript 中,交集類型是一種結合多個類型以創建新類型的方法。

什麼是交集類型?

交集類型允許您結合多個類型來定義一個具有所有這些類型屬性的新類型。交集類型使用 & 符號定義,並且要求包含每個組成類型的所有屬性。

範例:

1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7    name: "John Doe",
8    age: 30
9};

在這段程式碼中,通過定義 type C = A & BC 類型變成同時擁有 nameage 屬性的物件類型。

交集類型的優點

通過使用交集類型,您可以重複利用現有類型,並定義更靈活和複合的類型。這提高了代碼的可維護性和擴展性。此外,交集類型能夠同時適用多個不同類型的限制,從而增強類型安全性。

優點:

  • 可重複利用性:通過結合多個類型,您可以減少多餘的定義並重複利用現有類型。
  • 類型安全性:交集類型通過僅允許滿足多個類型條件的對象來增強類型檢查。

交集類型的使用案例

在擴展對象或介面時,交集類型非常有用。尤其是當您需要表示具有多個屬性的對象時,它非常有用。

使用案例 1:具有多個介面的對象

 1interface Drivable {
 2    drive(): void;
 3}
 4
 5interface Flyable {
 6    fly(): void;
 7}
 8
 9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12    drive() {
13        console.log("Driving on the road");
14    },
15    fly() {
16        console.log("Flying in the sky");
17    }
18};
19
20car.drive(); // "Driving on the road"
21car.fly();   // "Flying in the sky"

在此範例中,Vehicle 類型被定義為結合 DrivableFlyable 的交集類型。Vehicle 類型的對象必須實現 drive()fly() 方法。

使用案例 2:結合類別和交集類型

通過結合類別和交集類型,可以創建具有多個介面屬性的對象。

 1interface Person {
 2    name: string;
 3}
 4
 5interface Employee {
 6    employeeId: number;
 7}
 8
 9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12    constructor(public name: string, public employeeId: number) {}
13
14    getDetails() {
15        return `${this.name}, Employee ID: ${this.employeeId}`;
16    }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"

在此處,我們將 PersonEmployee 的交集類型 PersonEmployee 用於 CompanyWorker 類別,使其擁有兩者的屬性。

交集類型需要注意的要點

使用交集類型時,一個重要的要點是要注意屬性衝突的可能性。如果不同類型中具有相同名稱的屬性有不同的類型註解,可能會導致錯誤。

注意事項示例:

1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8    id: 1
9};

在此示例中,ABid 屬性衝突,導致在定義類型為 C 的對象時出現錯誤。在這種情況下,需要進行設計審查以避免屬性衝突。

帶有交集類型註解的代碼示例

最後,這裡是一個包含類型註解的真實代碼示例。

示例 1:顯示對象詳細信息

 1type ContactInfo = { phone: string; email: string };
 2type Address = { city: string; postalCode: string };
 3
 4type PersonDetails = ContactInfo & Address;
 5
 6const details: PersonDetails = {
 7    phone: "123-4567",
 8    email: "example@mail.com",
 9    city: "New York",
10    postalCode: "10001"
11};
12
13console.log(details);
  • 此代碼結合了 ContactInfoAddress 兩個介面,創建了一個名為 PersonDetails 的新類型。

示例 2:包含附加屬性的對象

 1interface BasicInfo {
 2    name: string;
 3    age: number;
 4}
 5
 6interface WorkInfo {
 7    company: string;
 8    position: string;
 9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14    name: "Bob",
15    age: 28,
16    company: "Tech Corp",
17    position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);
  • 此代碼結合了 BasicInfoWorkInfo 兩個介面,創建了一個名為 FullInfo 的新類型。

結論

TypeScript 的交集類型是一個強大的功能,可將多個類型組合成一個新類型。這增強了代碼的可重用性和安全性,從而實現複雜的類型定義。通過有效利用設計的靈活性並謹慎處理類型衝突,可以實現健壯且高度可讀的代碼。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video