TypeScriptの型エイリアス、インターセクション型、discriminated unionを使いこなす

TypeScriptにおける「declare class」と「interface」の違い

共通点

• オブジェクトの型を定義できる
• プロパティやメソッドを定義できる

相違点

使用目的

• declare class: 外部ライブラリなどで既に定義されているクラスを参照する場合に使用する。
• interface: 自作のオブジェクト型を定義する場合に使用する。

継承

• declare class: 他の declare class や interface を継承できる。
• interface: 他の interface を継承できる。

実装

• declare class: implements キーワードを使ってクラスが実装する。
• interface: クラスで直接使用できる。

修飾子

• declare class: public, private, protected などの修飾子を使用できる。

メソッド

• declare class: メソッドのシグネチャのみ定義できる。
• interface: メソッドのシグネチャと実装を定義できる。

使用例

• declare class: jQuery や React などの外部ライブラリの型定義に使用される。
• interface: 自作の API やコンポーネントの型定義に使用される。

使い分け

• 既存のクラスを参照する場合は declare class を使用する。
• 自作のオブジェクト型を定義する場合は interface を使用する。

declare class と interface は、どちらもオブジェクト型を定義するために使用されますが、それぞれ異なる用途があります。それぞれの違いを理解することで、コードをより分かりやすく、効率的に書くことができます。

外部ライブラリの型定義 (declare class)

// jQuery の型定義
declare class jQuery {
  // ...
}

// jQuery を使用
const $ = new jQuery();

自作のオブジェクト型定義 (interface)

// ユーザー情報
interface User {
  name: string;
  age: number;
}

// ユーザー情報の作成
const user: User = {
  name: "John Doe",
  age: 30,
};

メソッドの実装 (declare class)

// 挨拶をするクラス
declare class Greeter {
  // 挨拶する
  greet(): string;
}

// Greeter クラスを実装する
class MyGreeter implements Greeter {
  greet(): string {
    return "Hello, world!";
  }
}

// MyGreeter クラスを使用
const greeter = new MyGreeter();
const greeting = greeter.greet();
console.log(greeting); // "Hello, world!"

メソッドの実装 (interface)

// 動物
interface Animal {
  // 鳴き声を上げる
  makeSound(): string;
}

// 犬
class Dog implements Animal {
  makeSound(): string {
    return "ワンワン";
  }
}

// 猫
class Cat implements Animal {
  makeSound(): string {
    return "ニャーニャー";
  }
}

// 動物の鳴き声を表示
function printSound(animal: Animal) {
  console.log(animal.makeSound());
}

// Dog と Cat の鳴き声を表示
printSound(new Dog()); // ワンワン
printSound(new Cat()); // ニャーニャー

補足

• 上記のサンプルコードはほんの一例です。
• より複雑な型定義には、ジェネリック型やエイリアス型など、他の機能も活用できます。

TypeScript でオブジェクト型を定義するその他の方法

型エイリアス

// ユーザー情報
type User = {
  name: string;
  age: number;
};

// ユーザー情報の作成
const user: User = {
  name: "John Doe",
  age: 30,
};

インターセクション型

// ユーザー情報
interface User {
  name: string;
}

// 住所情報
interface Address {
  street: string;
  city: string;
}

// ユーザー情報と住所情報の型
type UserWithAddress = User & Address;

// ユーザー情報と住所情報の作成
const userWithAddress: UserWithAddress = {
  name: "John Doe",
  age: 30,
  street: "123 Main Street",
  city: "New York, NY",
};

discriminated union

// 種類
type Kind = "A" | "B";

// オブジェクト
interface Object {
  kind: Kind;
}

// A 型のオブジェクト
interface AObject extends Object {
  value: string;
}

// B 型のオブジェクト
interface BObject extends Object {
  number: number;
}

// オブジェクトの型
type Object = AObject | BObject;

// オブジェクトの作成
const object: Object = {
  kind: "A",
  value: "Hello, world!",
};

// オブジェクトの種類を取得
const kind = object.kind;

// オブジェクトの種類によって処理を分岐
switch (kind) {
  case "A":
    const aObject = object as AObject;
    console.log(aObject.value);
    break;
  case "B":
    const bObject = object as BObject;
    console.log(bObject.number);
    break;
}

使い分け

• 型エイリアスは、インターフェースよりも簡潔な記法で型を定義したい場合に使用する。
• インターセクション型は、複数のインターフェースを組み合わせて型を定義したい場合に使用する。
• discriminated union は、オブジェクトの種類によって処理を分岐したい場合に使用する。