A4.1 組み込みユーティリティ型

まずこれだけ覚えれば実務の大半は足ります。

組み合わせて使う

type User = { id: string; name: string; password: string; age?: number };

// 外部に返す形（password を除く）
type PublicUser = Omit<User, "password">;

// 更新用（id 以外を省略可能に）
type UserPatch = Partial<Omit<User, "id">>;

// 関数の戻り値から型を取る
async function loadUser(): Promise<PublicUser> { /* ... */ }
type Loaded = Awaited<ReturnType<typeof loadUser>>;     // PublicUser

type Config = Readonly<{ db: { host: string } }>;
const c: Config = { db: { host: "localhost" } };

c.db = { host: "x" };      // エラー（1段階目は守られる）
c.db.host = "x";           // 通ってしまう（2段階目は守られない）

A4.2 Mapped Types — キーを回す

基本の形

type MyReadonly<T> = {
	readonly [K in keyof T]: T[K];
};

[K in keyof T] は「T のキーをすべて回す」という意味です。for...of の型版だと考えてください。

標準のユーティリティ型はこれで書かれている

type Partial<T>  = { [K in keyof T]?: T[K] };
type Required<T> = { [K in keyof T]-?: T[K] };      // ? を外す
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Pick<T, K extends keyof T> = { [P in K]: T[P] };
type Record<K extends keyof any, V> = { [P in K]: V };

キー名を変換する

type Getters<T> = {
	[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type User = { name: string; age: number };
type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number }

値の型でキーを絞る

// 関数のプロパティだけを抜き出す
type FunctionKeys<T> = {
	[K in keyof T]: T[K] extends (...args: never[]) => unknown ? K : never;
}[keyof T];

type Api = { load(): void; name: string; save(): void };
type Methods = FunctionKeys<Api>;      // "load" | "save"

A4.3 Conditional Types と infer

型の if 文

type IsString<T> = T extends string ? "はい" : "いいえ";

type A = IsString<"abc">;      // "はい"
type B = IsString<123>;        // "いいえ"

T extends U ? X : Y は「T が U に代入できるなら X、できなければ Y」です。

union は分配される

type ToArray<T> = T extends unknown ? T[] : never;

type R = ToArray<string | number>;
// string[] | number[]   （(string | number)[] ではない）

type Exclude<T, U> = T extends U ? never : T;

type S = Exclude<"a" | "b" | "c", "b">;
// "a" | never | "c"  →  never は消えるので "a" | "c"

infer — 型の一部を取り出す

type ElementOf<T> = T extends (infer U)[] ? U : never;

type E = ElementOf<string[]>;      // string

infer U は「ここに当てはまる型を U という名前で捕まえる」という意味です。正規表現のキャプチャに似ています。

標準の型もこれで書かれている

type ReturnType<T> = T extends (...args: never[]) => infer R ? R : never;
type Parameters<T> = T extends (...args: infer P) => unknown ? P : never;
type Awaited<T> = T extends Promise<infer U> ? Awaited<U> : T;   // 再帰する

実務で書く例

// 判別可能ユニオンから特定の1つを取り出す
type Shape =
	| { kind: "circle"; radius: number }
	| { kind: "rect"; width: number; height: number };

type ShapeOf<K extends Shape["kind"]> = Extract<Shape, { kind: K }>;

type Circle = ShapeOf<"circle">;      // { kind: "circle"; radius: number }

function area(s: ShapeOf<"circle">): number {
	return Math.PI * s.radius ** 2;
}

A4.4 テンプレートリテラル型

文字列を型として組み立てる

type Prefixed = `user-${string}`;

const a: Prefixed = "user-001";      // OK
const b: Prefixed = "order-001";     // エラー TS2322

union と組み合わせると展開される

type Lang = "ja" | "en";
type Page = "home" | "about";

type Path = `/${Lang}/${Page}`;
// "/ja/home" | "/ja/about" | "/en/home" | "/en/about"

文字列操作の組み込み型

実務で見かける例

// イベント名の規約を型で表す
type EventName = `on${Capitalize<"click" | "focus">}`;
// "onClick" | "onFocus"

// 環境変数の接頭辞
type PublicEnvKey = `PUBLIC_${Uppercase<string>}`;

// CSS のプロパティ
type Margin = `margin${"" | "Top" | "Right" | "Bottom" | "Left"}`;
// "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft"

infer と組み合わせて分解する

type Split<S extends string, D extends string> =
	S extends `${infer Head}${D}${infer Tail}`
		? [Head, ...Split<Tail, D>]
		: [S];

type Parts = Split<"a/b/c", "/">;      // ["a", "b", "c"]

まとめ — どこまで必要か