TypeScriptにおける交差型

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 型は 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