type と interface: extends と交差型

コードを重複させずにオブジェクト型をモデル化し合成するために、適切な構文を選びましょう。

8 分 · 3 問

オブジェクト型の宣言方法はもう知っていますね。プロジェクトで本当に問われるのは、type と interface のどちらを選ぶか、そして既存の型をコードの重複なしに合成することです。まずは最もよくある場面から始めましょう。似た形をしたエンティティのモデル化です。

interface User {
  id: number;
  name: string;
}

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

const admin: Admin = {
  id: 1,
  name: "Ada",
  permissions: ["users:write"],
};

extends は明確な関係を作ります。Admin は追加の権限を持つ User である、という具合です。type エイリアスでも、交差演算子 & を使えば同じ結果が得られます。これは複数の形を1つに統合するもので、すべてのエンティティに存在するタイムスタンプのような横断的な関心事にうってつけの道具です。

type Timestamps = {
  createdAt: Date;
  updatedAt: Date;
};

type Product = {
  id: number;
  label: string;
};

type StoredProduct = Product & Timestamps;

では、どちらを選ぶべきでしょうか。本当に重要な違いは2つです。第一に、'active' | 'archived' のようなユニオンに名前を付けられるのは type だけです。第二に、同じ名前を共有する2つの interface 宣言は自動的にマージされます。ライブラリの型を拡張するには便利ですが、意図せず起きると危険です。

type Status = "active" | "archived";

interface Config {
  locale: string;
}

interface Config {
  debug: boolean;
}

const config: Config = { locale: "fr", debug: true };

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. 'draft' | 'published' という型に名前を付ける必要があります。どの構文が必須ですか?
   • interface
   • type
   • どちらでも動く
   • enum
2. 同じスコープに interface Config { ... } の宣言が2つ共存しています。何が起きますか?
   • 即座にコンパイルエラーになる
   • 2つ目が1つ目を上書きする
   • 1つのインターフェースにマージされる
   • 1つ目が優先される
3. 2つのオブジェクト型エイリアスを結合し、両方のプロパティを要求する1つの型を作る演算子はどれですか?
   • |
   • &
   • extends