型エイリアスとインターフェイス

TypeScript では、インターフェイス (interface) または 型エイリアス (type) を使用するという 2 つの主な方法で複雑なオブジェクトの構造を定義できます。どちらもオブジェクトまたはデータ構造の「形状」を記述するのに役立ちますが、根本的な違いがいくつかあります。

インターフェース (interface)

インターフェイスは、オブジェクトの構造の規約を定義します。これは、オブジェクトの形状とパブリック API を拡張可能な方法で記述するための標準ツールです。

interface Book {
  title: string;
  pages: number;
  author?: string; // Optional property (can be omitted)
}

const myBook: Book = {
  title: 'The Lord of the Rings',
  pages: 1200,
};

疑問符 (?) は、プロパティを オプション としてマークします。 myBook オブジェクトは、author プロパティを省略した場合でも有効です。

タイプエイリアス (type)

型エイリアスを使用すると、プリミティブ型、共用体、タプル、オブジェクト構造全体などの既存の型に新しい名前を関連付けることができます。

type Point = {
  x: number;
  y: number;
};

const coordinates: Point = { x: 10, y: 20 };

主な違い: 拡張機能と宣言のマージ

interface と type は、ほとんどの一般的な使用例では交換可能ですが、次の 2 つの重大な違いがあります。

1. 拡張性（継承）

インターフェイスは extends キーワードを使用して拡張されます。

interface User {
  username: string;
}

interface Admin extends User {
  privileges: string[];
}

型の別名は extends を使用して拡張できませんが、交差 演算子 (&) を使用して組み合わせることができます。

type User = {
  username: string;
};

type Admin = User & {
  privileges: string[];
};

2. 宣言のマージ

同じスコープ内の同じ名前を持つ複数のインターフェイスは、コンパイラによって自動的にマージされます。

interface User {
  name: string;
}
interface User {
  email: string;
}
// Now User has both 'name' and 'email'!

この動作は型エイリアスではサポートされていません。同じ type を 2 回宣言すると、コンパイル時エラーが発生します。

自分で試してみてください

演習 1: ユーザー インターフェイス

演習 2: Point2D タイプのエイリアス

演習 3: インターフェイスの拡張

演習 4: サーバー構成