TypeScriptにおける交差型
この記事ではTypeScriptにおける交差型について説明します。
YouTube Video
TypeScriptにおける交差型
TypeScriptにおける**交差型(Intersection Types)**は、複数の型を組み合わせて、新しい型を作成する方法です。
交差型とは?
交差型は、複数の型を組み合わせて、それらすべてのプロパティを持つ新しい型を定義する仕組みです。交差型は &
記号を使用して定義され、各構成要素の型が持つすべてのプロパティを要求します。
例:
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 & B
と定義することで、C
型は name
とage
を持つオブジェクト型になっています。
交差型のメリット
交差型を利用することで、既存の型を再利用し、より柔軟で複合的な型を定義することができます。これにより、コードの保守性や拡張性が向上します。また、交差型は 複数の異なる型の制約を同時に適用できるため、型の安全性も高めます。
メリット:
- 再利用性: 複数の型を組み合わせることで、冗長な定義を減らし、既存の型を再利用できます。
- 型の安全性: 交差型により、複数の型の条件を満たすオブジェクトのみを許可することで、型チェックが強化されます。
交差型の利用シーン
交差型は、オブジェクトやインターフェースを拡張する際に非常に有用です。特に、複数の性質を持つオブジェクトを表現したい場合に役立ちます。
利用例 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
型が Drivable
と Flyable
を組み合わせた交差型として定義されています。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"
ここでは、Person
と Employee
の交差型 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};
この例では、A
と B
の id
プロパティが競合しているため、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);
- このコードでは、
ContactInfo
とAddress
のインターフェースを結合して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}`);
- このコードは、
BasicInfo
とWorkInfo
のインターフェースを結合してFullInfo
という新しい型を作成しています。
結論
TypeScriptの交差型は、複数の型を統合して新しい型を作成する強力な機能です。これにより、コードの再利用性と安全性が向上し、複雑な型定義が可能になります。設計の柔軟性を持たせつつ、型の競合に注意しながら効果的に活用することで、堅牢で可読性の高いコードを実現できます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。