TypeScriptのExtract型を活用！ユニオン型から必要な型を取り出す方法

はじめに

Extractを活用してみたので、メモ用に書いています。

Extract

Extract<T,U>とは、ユニオン型Tの構成要素から型Uに指定した型を取り出すユーティリティ型となります。

詳しくは以下の公式を参照。

活用例

以下は、ダイアログの表示設定ファイルの内容です。

DialogActions型では、ダイアログのアクションごとをユニオン型注釈で定義しています。
ページによっては、updateのみやdeleteのみパターンで使いたいたい時、Extractを活用すると便利。
ProfileUpdateConfig型に、ExtractでDialogActionsから"update"のみを取り出す型を定義することで、安全かつ効率的な新たな型を組み立てるのに役立てられます！

また、今回はRecordも一緒に活用するのも便利です。
ダイアログのアクション型であるDialogActionsをオブジェクトのキーとして活用し、
それぞれのオブジェクト値をDialogConfig型で統一させる。
これにより、create update deleteの各設定で、title・description・confirmLabelの書き忘れや型の間違いをTypeScriptが検出できます。

// 処理の種類を型で定義
export type DialogActions = "create" | "update" | "delete";

// ダイアログの処理を共通化

export type DialogConfig = {
  title: string;
  description: string;
  confirmLabel: string;
};

// 処理ごとの表示設定
export const DIALOG_ERRORLOG_CONFIG: Record<DialogActions, DialogConfig> = {
  create: {
    title: "エラーログを投稿しますか？",
    description: "入力した内容で新しく登録します。",
    confirmLabel: "投稿する",
  },

  update: {
    title: "変更内容を保存しますか？",
    description: "エラーログが編集内容で更新されます。",
    confirmLabel: "保存する",
  },

  delete: {
    title: "エラーログを削除しますか？",
    description: "削除したデータは元に戻せません。",
    confirmLabel: "削除する",
  }, 
}

type ProfileUpdateConfig = Extract<DialogActions, "update">

export const DIALOG_PROFILE_CONFIG : Record<ProfileUpdateConfig, DialogConfig> = {

  update: {
    title: "変更内容を保存しますか？",
    description: "プロフィールを編集内容で更新されます。",
    confirmLabel: "保存する",
  },
}