型パズルがたのしくなるための技法リスト

TypeScript中級者になるために,習得した奥義を公開します.

object→type

JavaScriptのオブジェクトや配列から型エイリアスを作成する便利なテクニック一覧

オブジェクトを型に

みんな大好きtypof

const user = {
  id: 1,
  name: 'Steve Nobs',
  isAuth: true,
};

type User = typeof user; // 以下と同義

type User = {
    id: number;
    name: string;
    isAuth: boolean;
};

オブジェクトのkeyをstringのユニオン型に

keyof

const user = {
  id: 1,
  name: 'Steve Nobs',
  isAuth: true,
};

type User = keyof typeof user; // 以下と同義

type User = "id" | "name" | "isAuth";

配列をユニオン型に

as constを忘れずに

const colors = ['red', 'green', 'blue'] as const;

type Color = typeof colors[number]; // 以下と同義

type Color = "red" | "green" | "blue";

type→type

型から特定の型エイリアスを作成する便利なテクニック一覧

ユニオン型から指定した要素を抽出

Extractを使う

type Input =
  | {
      type: 'text';
      value: string;
      onChange: (value: string) => void;
    }
  | {
      type: 'checkbox';
      checked: boolean;
      onChange: (checked: boolean) => void;
    }
  | {
      type: 'select';
      value: string;
      options: {
        value: string;
        label: string;
      }[];
      onChange: (value: string) => void;
    };

type Checkbox = Extract<Input, { type: 'checkbox' }>;

配列の型から要素の型を抽出

packageから型を引っ張り出したいときに使ったりする

type CheckboxArray = {
  type: 'checkbox';
  checked: boolean;
  onChange: (checked: boolean) => void;
}[];

type Checkbox = CheckboxArray[number];

オブジェクト型から特定のプロパティの型を抽出

なかなかに直感的で良い

type Form = {
  name: string;
  elements: Input[]; // こいつが欲しい
};

type InputElements = Form['elements'];
type InputElement = Form['elements'][number]; // Input だけ取り出したい場合

これらが使えるとTypeScript中級者って感じしてきて型パズル楽しいですね！