【TypeScript】高度な型（条件型・テンプレートリテラル型・マップ型）完全ガイド｜実務で使える応用テクニック

この記事で学べること

• 条件型（Conditional Types）の基本から infer・分配条件型まで
• マップ型（Mapped Types）によるオブジェクト型の柔軟な変換
• テンプレートリテラル型で文字列パターンの型安全な定義
• インデックスアクセス型でネストした型の取得
• 高度な型を組み合わせた実務パターン（DeepPartial、イベントシステム、APIレスポンス変換）
• 型レベルプログラミングのパフォーマンスとデバッグ

// 1. 条件に応じて型を切り替える（条件型）
type IsString<T> = T extends string ? true : false;
type A = IsString<"hello">;  // true
type B = IsString<42>;       // false

// 2. オブジェクトの全プロパティを変換する（マップ型）
type Optional<T> = { [K in keyof T]?: T[K] };
// { name?: string; age?: number; }

// 3. 文字列パターンを型で表現する（テンプレートリテラル型）
type EventName = `on${"Click" | "Hover" | "Focus"}`;
// "onClick" | "onHover" | "onFocus"

// 4. 関数の戻り値型を自動抽出する（infer）
type ReturnOf<T> = T extends (...args: any[]) => infer R ? R : never;
type C = ReturnOf<() => string>;  // string

前提知識：この記事ではジェネリクス（<T>）とユニオン型（A | B）の基本を理解していることを前提としています。これらに不安がある方は、先にジェネリクスの基礎を学んでから読み進めることをおすすめします。

// 基本構文
type ConditionalType = SomeType extends OtherType ? TrueType : FalseType;

// 具体例: 型が string かどうかを判定
type IsString<T> = T extends string ? "string型です" : "string型ではありません";

type Test1 = IsString<"hello">;   // "string型です"
type Test2 = IsString<123>;       // "string型ではありません"
type Test3 = IsString<string>;    // "string型です"
type Test4 = IsString<boolean>;   // "string型ではありません"

// 型に応じてラッパーの形を変える
type Wrap<T> = T extends string
  ? { value: string; length: number }
  : T extends number
  ? { value: number; isPositive: boolean }
  : { value: T };

type StringWrap = Wrap<string>;   // { value: string; length: number }
type NumberWrap = Wrap<number>;   // { value: number; isPositive: boolean }
type BoolWrap = Wrap<boolean>;   // { value: boolean }

// 実務例: API レスポンスの型を切り替える
type ApiResponse<T> = T extends "user"
  ? { id: number; name: string; email: string }
  : T extends "product"
  ? { id: number; title: string; price: number }
  : never;

function fetchData<T extends "user" | "product">(endpoint: T): Promise<ApiResponse<T>> {
  return fetch(`/api/${endpoint}`).then(r => r.json());
}

// 型推論が正確に行われる
const user = await fetchData("user");       // { id: number; name: string; email: string }
const product = await fetchData("product");  // { id: number; title: string; price: number }

注意：条件型の extends は、クラスの継承における extends とは異なります。ここでは「割り当て可能（assignable）」かどうかを判定するキーワードとして機能します。T extends U は「T が U のサブタイプである」という意味です。

// 関数の戻り値型を抽出
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetReturn = MyReturnType<typeof greet>;  // string

// 配列の要素型を抽出
type ElementType<T> = T extends (infer U)[] ? U : never;

type StrArray = ElementType<string[]>;           // string
type NumArray = ElementType<number[]>;           // number
type MixedArray = ElementType<(string | number)[]>;  // string | number
type NotArray = ElementType<string>;             // never（配列でないため）

// Promise の解決値型を抽出
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type P1 = UnwrapPromise<Promise<string>>;  // string
type P2 = UnwrapPromise<Promise<number>>;  // number
type P3 = UnwrapPromise<string>;           // string（Promiseでない場合はそのまま）

// 関数の第1引数の型を取得
type FirstArg<T> = T extends (first: infer A, ...rest: any[]) => any ? A : never;

type Arg = FirstArg<(name: string, age: number) => void>; // string

// コンストラクタの引数型を取得
type ConstructorArgs<T> = T extends new (...args: infer A) => any ? A : never;

class User {
  constructor(public name: string, public age: number) {}
}

type UserArgs = ConstructorArgs<typeof User>; // [name: string, age: number]

// タプルの先頭と残りを分離
type Head<T extends any[]> = T extends [infer First, ...any[]] ? First : never;
type Tail<T extends any[]> = T extends [any, ...infer Rest] ? Rest : never;

type H = Head<[string, number, boolean]>; // string
type T = Tail<[string, number, boolean]>; // [number, boolean]

// 複数の infer を使う: オブジェクトのキーと値の型を同時に抽出
type ExtractEntry<T> = T extends Map<infer K, infer V>
  ? { key: K; value: V }
  : never;

type Entry = ExtractEntry<Map<string, number>>; // { key: string; value: number }

ポイント：infer は TypeScript の組み込みユーティリティ型（ReturnType、Parameters、ConstructorParameters など）の実装にも使われています。自分で同等の型を作れるようになると、型プログラミングの幅が大きく広がります。

// 分配の仕組みを理解する
type ToArray<T> = T extends any ? T[] : never;

// ユニオン型を渡すと、各メンバーに対して個別に適用される
type Result = ToArray<string | number>;
// 分配: ToArray<string> | ToArray<number>
// 結果: string[] | number[]

// (string | number)[] ではなく string[] | number[] になることに注意

// 分配条件型の活用: ユニオンから特定の型を除外する
type MyExclude<T, U> = T extends U ? never : T;

type Colors = "red" | "green" | "blue" | "yellow";
type WarmColors = MyExclude<Colors, "green" | "blue">;
// 結果: "red" | "yellow"

// ユニオンから特定の型を抽出する
type MyExtract<T, U> = T extends U ? T : never;

type CoolColors = MyExtract<Colors, "green" | "blue" | "purple">;
// "green" | "blue"

// 分配される（裸の型パラメータ）
type Distributed<T> = T extends any ? T[] : never;
type D = Distributed<string | number>; // string[] | number[]

// 分配されない（タプルで包む）
type NonDistributed<T> = [T] extends [any] ? T[] : never;
type ND = NonDistributed<string | number>; // (string | number)[]

// 分配を利用: ユニオンから null/undefined を除去
type MyNonNullable<T> = T extends null | undefined ? never : T;
type Cleaned = MyNonNullable<string | null | undefined | number>;
// string | number

分配条件型の動作まとめ

• T extends U ? X : Y にユニオン型を渡すと、各メンバーに対して個別に評価される
• 分配が起きる条件：型パラメータが裸（直接 extends の左辺にある）であること
• [T] extends [U] のようにタプルで包むと分配を防止できる
• Exclude、Extract、NonNullable などの組み込み型は分配条件型で実装されている

// TypeScriptの型名を文字列リテラルとして返す
type TypeName<T> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  T extends undefined ? "undefined" :
  T extends Function ? "function" :
  "object";

type T1 = TypeName<string>;       // "string"
type T2 = TypeName<42>;           // "number"
type T3 = TypeName<() => void>;  // "function"
type T4 = TypeName<string[]>;     // "object"

// 実務例: DBカラム型をTSの型に変換
type DbColumnType = "VARCHAR" | "INT" | "BOOLEAN" | "TIMESTAMP" | "JSON";

type DbToTs<T extends DbColumnType> =
  T extends "VARCHAR" ? string :
  T extends "INT" ? number :
  T extends "BOOLEAN" ? boolean :
  T extends "TIMESTAMP" ? Date :
  T extends "JSON" ? Record<string, unknown> :
  never;

type VarcharTs = DbToTs<"VARCHAR">;    // string
type IntTs = DbToTs<"INT">;          // number
type TimestampTs = DbToTs<"TIMESTAMP">;  // Date

// ネスト + infer: 深い型の再帰展開
type DeepUnwrap<T> =
  T extends Promise<infer U> ? DeepUnwrap<U> :
  T extends (infer U)[] ? DeepUnwrap<U> :
  T;

type Deep1 = DeepUnwrap<Promise<string>>;         // string
type Deep2 = DeepUnwrap<Promise<Promise<number>>>; // number
type Deep3 = DeepUnwrap<string[][]>;            // string

注意：再帰的な条件型は TypeScript 4.1 以降で対応していますが、再帰の深さには上限があります（デフォルトで約1000レベル）。無限再帰を避けるために、必ずベースケース（終了条件）を設けてください。

// 1. 関数のパラメータ型を取得（Parameters と同等）
type MyParameters<T extends (...args: any) => any> =
  T extends (...args: infer P) => any ? P : never;

function createUser(name: string, age: number, email: string) {
  return { name, age, email };
}
type CreateUserParams = MyParameters<typeof createUser>;
// [name: string, age: number, email: string]

// 2. Promise を再帰的にアンラップ（Awaited と同等）
type MyAwaited<T> =
  T extends null | undefined ? T :
  T extends object & { then(onfulfilled: infer F): any }
    ? F extends (value: infer V) => any ? MyAwaited<V> : never
    : T;

type A1 = MyAwaited<Promise<string>>;           // string
type A2 = MyAwaited<Promise<Promise<number>>>; // number

// 3. ユニオンをインターセクションに変換
type UnionToIntersection<U> =
  (U extends any ? (k: U) => void : never) extends
  (k: infer I) => void ? I : never;

type Intersected = UnionToIntersection<
  { a: string } | { b: number } | { c: boolean }
>;
// { a: string } & { b: number } & { c: boolean }

// 4. Flatten: 配列型を展開する
type Flatten<T> = T extends (infer U)[] ? U : T;

type F1 = Flatten<string[]>;   // string
type F2 = Flatten<number[][]>; // number[]
type F3 = Flatten<string>;     // string（配列でなければそのまま）

// 基本構文
type MappedType<T> = {
  [K in keyof T]: SomeTransformation<T[K]>
};

// 例: すべてのプロパティを string に変換
type Stringify<T> = {
  [K in keyof T]: string
};

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

type StringifiedUser = Stringify<User>;
// { id: string; name: string; isActive: string }

// 例: すべてのプロパティを配列に変換
type Arrayify<T> = {
  [K in keyof T]: T[K][]
};

type ArrayUser = Arrayify<User>;
// { id: number[]; name: string[]; isActive: boolean[] }

// 例: Nullable に変換（各プロパティに null を追加）
type Nullable<T> = {
  [K in keyof T]: T[K] | null
};

type NullableUser = Nullable<User>;
// { id: number | null; name: string | null; isActive: boolean | null }

ポイント：T[K] はインデックスアクセス型（後述）で、キー K に対応する値の型を取得します。マップ型の中で T[K] を使うことで、元の型の値を参照しながら変換できます。

// すべてのプロパティを readonly にする（Readonly と同等）
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K]
};

// すべてのプロパティをオプショナルにする（Partial と同等）
type MyPartial<T> = {
  [K in keyof T]?: T[K]
};

// すべてのプロパティを必須にする（Required と同等）
type MyRequired<T> = {
  [K in keyof T]-?: T[K]
};

// readonly を削除する（Mutable）
type Mutable<T> = {
  -readonly [K in keyof T]: T[K]
};

// 使用例
interface Config {
  readonly host: string;
  readonly port: number;
  readonly debug?: boolean;
}

type MutableConfig = Mutable<Config>;
// { host: string; port: number; debug?: boolean }

type RequiredMutableConfig = MyRequired<Mutable<Config>>;
// { host: string; port: number; debug: boolean }

// 実務例: フォームの入力状態
interface UserForm {
  username: string;
  email: string;
  password: string;
}

// フォームの各フィールドの状態を表す型
type FormState<T> = {
  [K in keyof T]: {
    value: T[K];
    error: string | null;
    touched: boolean;
  }
};

type UserFormState = FormState<UserForm>;
// {
//   username: { value: string; error: string | null; touched: boolean };
//   email: { value: string; error: string | null; touched: boolean };
//   password: { value: string; error: string | null; touched: boolean };
// }

// 基本構文: as 句でキーを変換
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

interface Person {
  name: string;
  age: number;
  location: string;
}

type PersonGetters = Getters<Person>;
// {
//   getName: () => string;
//   getAge: () => number;
//   getLocation: () => string;
// }

// Setters も同様に生成
type Setters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void
};

type PersonSetters = Setters<Person>;
// {
//   setName: (value: string) => void;
//   setAge: (value: number) => void;
//   setLocation: (value: string) => void;
// }

// as 句で never を返すとキーを除外できる
type RemoveKind<T> = {
  [K in keyof T as Exclude<K, "kind">]: T[K]
};

interface Shape {
  kind: "circle";
  radius: number;
  color: string;
}

type ShapeWithoutKind = RemoveKind<Shape>;
// { radius: number; color: string }

// 特定の型のプロパティだけを抽出
type PickByType<T, ValueType> = {
  [K in keyof T as T[K] extends ValueType ? K : never]: T[K]
};

interface Mixed {
  id: number;
  name: string;
  active: boolean;
  email: string;
  count: number;
}

type StringProps = PickByType<Mixed, string>;
// { name: string; email: string }

type NumberProps = PickByType<Mixed, number>;
// { id: number; count: number }

Key Remapping のポイント

• as 句の中で never を返すと、そのキーは結果の型から除外される
• Capitalize などの組み込み文字列型と組み合わせてキー名を変換できる
• 条件型と組み合わせることで、値の型に基づいてキーをフィルタリングできる
• string & K は、K が symbol の場合を除外するためのイディオム

// イベントハンドラ型の自動生成
type EventHandlers<T> = {
  [K in keyof T as `on${Capitalize<string & K>}Change`]: (newValue: T[K]) => void
};

interface State {
  name: string;
  count: number;
  active: boolean;
}

type StateHandlers = EventHandlers<State>;
// {
//   onNameChange: (newValue: string) => void;
//   onCountChange: (newValue: number) => void;
//   onActiveChange: (newValue: boolean) => void;
// }

// プレフィックス付きのプロパティを生成
type Prefixed<T, Prefix extends string> = {
  [K in keyof T as `${Prefix}_${string & K}`]: T[K]
};

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

type UserRow = Prefixed<DbRow, "user">;
// { user_id: number; user_name: string }

// 実務例: React の状態管理パターン
type StateWithSetters<T> = T & {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void
};

type AppStore = StateWithSetters<{
  theme: "light" | "dark";
  locale: string;
  isLoggedIn: boolean;
}>;
// {
//   theme: "light" | "dark";
//   locale: string;
//   isLoggedIn: boolean;
//   setTheme: (value: "light" | "dark") => void;
//   setLocale: (value: string) => void;
//   setIsLoggedIn: (value: boolean) => void;
// }

// 基本: 文字列リテラル型の結合
type Greeting = `Hello, ${string}`;

const a: Greeting = "Hello, World";     // OK
const b: Greeting = "Hello, TypeScript"; // OK
// const c: Greeting = "Hi, World";        // エラー！

// リテラル型の結合
type World = "world";
type HelloWorld = `hello ${World}`;  // "hello world"

// 数値型との組み合わせ
type Id = `user-${number}`;
const id1: Id = "user-123";  // OK
const id2: Id = "user-456";  // OK
// const id3: Id = "user-abc";  // エラー！

// CSSの単位付き値
type CSSUnit = "px" | "em" | "rem" | "%" | "vh" | "vw";
type CSSLength = `${number}${CSSUnit}`;

const width: CSSLength = "100px";   // OK
const height: CSSLength = "50vh";   // OK
const margin: CSSLength = "2.5rem"; // OK
// const bad: CSSLength = "auto";     // エラー！

// ユニオンの組み合わせ展開
type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type ColorSize = `${Color}-${Size}`;
// "red-small" | "red-medium" | "red-large"
// | "blue-small" | "blue-medium" | "blue-large"
// | "green-small" | "green-medium" | "green-large"

// イベント名の型安全な定義
type DOMEvent = "click" | "hover" | "focus" | "blur";
type EventHandler = `on${Capitalize<DOMEvent>}`;
// "onClick" | "onHover" | "onFocus" | "onBlur"

// HTTPメソッドとパスの組み合わせ
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type Endpoint = "/users" | "/products" | "/orders";
type Route = `${HttpMethod} ${Endpoint}`;
// "GET /users" | "GET /products" | "GET /orders"
// | "POST /users" | "POST /products" | ...
// 合計12個のリテラル型

// CSSクラス名の型安全な定義（BEM命名規則）
type Block = "button" | "card" | "modal";
type Modifier = "primary" | "secondary" | "disabled";
type BEMClass = Block | `${Block}--${Modifier}`;
// "button" | "card" | "modal"
// | "button--primary" | "button--secondary" | "button--disabled"
// | "card--primary" | ... | "modal--disabled"

注意：ユニオンの組み合わせは掛け算で増えます。例えば3つの型 x 4つの型 = 12個のリテラル型が生成されます。大きなユニオン同士を組み合わせるとコンパイルが遅くなる場合があるため、必要最小限のユニオンに絞ることが重要です。

// Uppercase: すべて大文字に変換
type U1 = Uppercase<"hello">;    // "HELLO"
type U2 = Uppercase<"TypeScript">; // "TYPESCRIPT"

// Lowercase: すべて小文字に変換
type L1 = Lowercase<"HELLO">;    // "hello"
type L2 = Lowercase<"TypeScript">; // "typescript"

// Capitalize: 先頭文字だけ大文字に変換
type C1 = Capitalize<"hello">;     // "Hello"
type C2 = Capitalize<"typeScript">; // "TypeScript"

// Uncapitalize: 先頭文字だけ小文字に変換
type UC1 = Uncapitalize<"Hello">;     // "hello"
type UC2 = Uncapitalize<"TypeScript">; // "typeScript"

// ユニオンと組み合わせ
type Events = "click" | "change" | "submit";
type Handlers = `on${Capitalize<Events>}`;
// "onClick" | "onChange" | "onSubmit"

// 環境変数名の型安全な定義
type EnvKey = "database" | "redis" | "api";
type EnvSuffix = "host" | "port" | "url";
type EnvVar = Uppercase<`${EnvKey}_${EnvSuffix}`>;
// "DATABASE_HOST" | "DATABASE_PORT" | "DATABASE_URL"
// | "REDIS_HOST" | "REDIS_PORT" | "REDIS_URL"
// | "API_HOST" | "API_PORT" | "API_URL"

// 1. CSSプロパティ名のキャメルケース→ケバブケース変換
type CamelToKebab<S extends string> =
  S extends `${infer Head}${infer Tail}`
    ? Tail extends Uncapitalize<Tail>
      ? `${Lowercase<Head>}${CamelToKebab<Tail>}`
      : `${Lowercase<Head>}-${CamelToKebab<Tail>}`
    : S;

type K1 = CamelToKebab<"fontSize">;        // "font-size"
type K2 = CamelToKebab<"backgroundColor">; // "background-color"
type K3 = CamelToKebab<"borderTopWidth">;  // "border-top-width"

// 2. パスパラメータの型安全な抽出
type ExtractParams<Path extends string> =
  Path extends `${infer _Start}:${infer Param}/${infer Rest}`
    ? Param | ExtractParams<`/${Rest}`>
    : Path extends `${infer _Start}:${infer Param}`
      ? Param
      : never;

type Params1 = ExtractParams<"/users/:id">;          // "id"
type Params2 = ExtractParams<"/users/:userId/posts/:postId">;
// "userId" | "postId"

// 3. ドットパスの型安全な定義
type DotPath<T> = T extends object
  ? {
      [K in keyof T & string]:
        | K
        | `${K}.${DotPath<T[K]> & string}`
    }[keyof T & string]
  : never;

interface Config {
  db: {
    host: string;
    port: number;
  };
  api: {
    key: string;
  };
}

type ConfigPaths = DotPath<Config>;
// "db" | "db.host" | "db.port" | "api" | "api.key"

// 4. SQLクエリの型安全なカラム参照
type TableColumns<Tables extends Record<string, string>> = {
  [T in keyof Tables & string]: `${T}.${Tables[T]}`
}[keyof Tables & string];

type DbSchema = {
  users: "id" | "name" | "email";
  posts: "id" | "title" | "author_id";
};

type Columns = TableColumns<DbSchema>;
// "users.id" | "users.name" | "users.email"
// | "posts.id" | "posts.title" | "posts.author_id"

ポイント：テンプレートリテラル型と infer を組み合わせると、文字列パターンの解析も型レベルで行えます。infer で文字列の一部をキャプチャし、再帰的に処理することで複雑な文字列変換が可能です。

interface User {
  id: number;
  name: string;
  email: string;
  address: {
    street: string;
    city: string;
    zip: string;
  };
  roles: string[];
}

// 単一プロパティの型を取得
type UserId = User["id"];       // number
type UserName = User["name"];   // string
type UserAddr = User["address"]; // { street: string; city: string; zip: string }
type UserRoles = User["roles"];  // string[]

// ユニオン型のキーで複数プロパティの型をまとめて取得
type IdOrName = User["id" | "name"]; // number | string

// keyof と組み合わせてすべてのプロパティの値型を取得
type UserValues = User[keyof User];
// number | string | { street: string; city: string; zip: string } | string[]

// ジェネリクスと組み合わせ
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user: User = { /* ... */ } as User;
const name = getProperty(user, "name");     // string
const address = getProperty(user, "address"); // { street: string; ... }

// 配列型から要素型を取得
type StringArray = string[];
type StringElement = StringArray[number]; // string

// タプル型から要素型を取得
type Tuple = [string, number, boolean];
type TupleElement = Tuple[number]; // string | number | boolean

// タプルの特定位置の型を取得
type First = Tuple[0];  // string
type Second = Tuple[1]; // number
type Third = Tuple[2];  // boolean

// 実務例: as const 配列からユニオン型を生成
const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number]; // "admin" | "editor" | "viewer"

const STATUS_CODES = [200, 201, 400, 404, 500] as const;
type StatusCode = (typeof STATUS_CODES)[number]; // 200 | 201 | 400 | 404 | 500

// 実務例: 設定オブジェクトから型を生成
const routes = {
  home: "/",
  about: "/about",
  users: "/users",
  userDetail: "/users/:id",
} as const;

type RouteName = keyof typeof routes;
// "home" | "about" | "users" | "userDetail"

type RoutePath = (typeof routes)[RouteName];
// "/" | "/about" | "/users" | "/users/:id"

interface ApiResponse {
  status: number;
  data: {
    user: {
      id: number;
      profile: {
        avatar: string;
        bio: string;
      };
    };
    posts: {
      id: number;
      title: string;
    }[];
  };
}

// ネストしたアクセス
type UserData = ApiResponse["data"]["user"];
// { id: number; profile: { avatar: string; bio: string } }

type Profile = ApiResponse["data"]["user"]["profile"];
// { avatar: string; bio: string }

type Avatar = ApiResponse["data"]["user"]["profile"]["avatar"];
// string

// 配列の要素型もチェーンで取得
type Post = ApiResponse["data"]["posts"][number];
// { id: number; title: string }

type PostTitle = ApiResponse["data"]["posts"][number]["title"];
// string

// 実務例: ドットパスでネストしたプロパティの型を取得するユーティリティ
type GetByPath<T, Path extends string> =
  Path extends `${infer Key}.${infer Rest}`
    ? Key extends keyof T
      ? GetByPath<T[Key], Rest>
      : never
    : Path extends keyof T
      ? T[Path]
      : never;

type G1 = GetByPath<ApiResponse, "data.user.profile.avatar">; // string
type G2 = GetByPath<ApiResponse, "status">;                // number
type G3 = GetByPath<ApiResponse, "data.user">;             // { id: number; profile: { ... } }

インデックスアクセス型のまとめ

• T["key"] でオブジェクト型のプロパティの型を取得
• T[number] で配列型の要素の型を取得
• T[keyof T] ですべてのプロパティの値型のユニオンを取得
• チェーンして T["a"]["b"]["c"] のようにネストした型にアクセス可能
• as const と組み合わせると、実行時の値からリテラル型のユニオンを生成できる

// DeepPartial: 全階層のプロパティをオプショナルにする
type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object
    ? T[K] extends any[]
      ? T[K]  // 配列はそのまま
      : DeepPartial<T[K]>  // オブジェクトは再帰
    : T[K]  // プリミティブはそのまま
};

interface AppConfig {
  server: {
    host: string;
    port: number;
    ssl: {
      enabled: boolean;
      cert: string;
    };
  };
  database: {
    url: string;
    pool: number;
  };
}

// 部分的な設定の上書きに便利
function updateConfig(partial: DeepPartial<AppConfig>) {
  // ...
}

updateConfig({
  server: {
    ssl: { enabled: true }  // cert は省略可能
  }
  // database は省略可能
});

// DeepReadonly: 全階層を読み取り専用にする
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? T[K] extends Function
      ? T[K]  // 関数はそのまま
      : DeepReadonly<T[K]>
    : T[K]
};

const config: DeepReadonly<AppConfig> = {
  server: { host: "localhost", port: 3000, ssl: { enabled: false, cert: "" } },
  database: { url: "localhost:5432", pool: 10 }
};

// config.server.port = 8080;  // エラー！readonly
// config.server.ssl.enabled = true;  // エラー！deep readonly

// DeepRequired: 全階層を必須にする
type DeepRequired<T> = {
  [K in keyof T]-?: T[K] extends object
    ? DeepRequired<T[K]>
    : T[K]
};

// イベントマップの定義
interface EventMap {
  userLogin: { userId: string; timestamp: Date };
  userLogout: { userId: string };
  pageView: { url: string; referrer?: string };
  error: { code: number; message: string };
}

// イベントハンドラの型を自動生成
type EventHandlerMap<T> = {
  [K in keyof T as `on${Capitalize<string & K>}`]: (payload: T[K]) => void
};

type Handlers = EventHandlerMap<EventMap>;
// {
//   onUserLogin: (payload: { userId: string; timestamp: Date }) => void;
//   onUserLogout: (payload: { userId: string }) => void;
//   onPageView: (payload: { url: string; referrer?: string }) => void;
//   onError: (payload: { code: number; message: string }) => void;
// }

// 型安全なイベントエミッタークラス
class TypedEventEmitter<Events extends Record<string, any>> {
  private listeners = new Map<string, Set<Function>>();

  on<K extends keyof Events & string>(
    event: K,
    handler: (payload: Events[K]) => void
  ): void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event)!.add(handler);
  }

  emit<K extends keyof Events & string>(
    event: K,
    payload: Events[K]
  ): void {
    this.listeners.get(event)?.forEach(fn => fn(payload));
  }
}

// 使用例
const emitter = new TypedEventEmitter<EventMap>();

// イベント名とペイロード型が自動で対応する
emitter.on("userLogin", (payload) => {
  // payload は { userId: string; timestamp: Date } と推論される
  console.log(payload.userId);
});

emitter.emit("error", { code: 404, message: "Not Found" }); // OK
// emitter.emit("error", { code: "404" });  // エラー！code は number

// snake_case → camelCase の型レベル変換
type SnakeToCamel<S extends string> =
  S extends `${infer Head}_${infer Tail}`
    ? `${Head}${Capitalize<SnakeToCamel<Tail>>}`
    : S;

type SC1 = SnakeToCamel<"user_name">;       // "userName"
type SC2 = SnakeToCamel<"created_at">;      // "createdAt"
type SC3 = SnakeToCamel<"is_email_verified">; // "isEmailVerified"

// オブジェクト全体のキーを camelCase に変換
type CamelizeKeys<T> = {
  [K in keyof T as SnakeToCamel<K & string>]: T[K] extends object
    ? T[K] extends any[]
      ? T[K]
      : CamelizeKeys<T[K]>
    : T[K]
};

// APIレスポンス（snake_case）
interface ApiUser {
  user_id: number;
  first_name: string;
  last_name: string;
  email_address: string;
  created_at: string;
  is_active: boolean;
}

// 自動変換結果（camelCase）
type FrontendUser = CamelizeKeys<ApiUser>;
// {
//   userId: number;
//   firstName: string;
//   lastName: string;
//   emailAddress: string;
//   createdAt: string;
//   isActive: boolean;
// }

// 日付フィールドを自動で Date に変換する型
type DateFields<T> = {
  [K in keyof T]: K extends `${string}_at` | `${string}_date`
    ? Date
    : T[K]
};

type WithDates = DateFields<ApiUser>;
// created_at が Date 型になる

// 完全な変換パイプライン
type TransformResponse<T> = CamelizeKeys<DateFields<T>>;

ポイント：型変換パイプラインを構築することで、バックエンドの型定義を1つ書くだけでフロントエンドの型が自動生成されます。APIスキーマが変更された場合も、型エラーが自動で検出されるため保守性が大幅に向上します。

// バリデーションルールの型定義
type ValidationRule<T> = {
  required?: boolean;
  validate?: (value: T) => string | true;
} & (T extends string
  ? { minLength?: number; maxLength?: number; pattern?: RegExp }
  : T extends number
  ? { min?: number; max?: number }
  : {});

// フォームスキーマから型安全にバリデーションルールを定義
type FormValidation<T> = {
  [K in keyof T]?: ValidationRule<T[K]>
};

// フォームエラーの型
type FormErrors<T> = {
  [K in keyof T]?: string
};

// 使用例
interface RegisterForm {
  username: string;
  email: string;
  age: number;
  password: string;
}

const validation: FormValidation<RegisterForm> = {
  username: {
    required: true,
    minLength: 3,
    maxLength: 20,
    pattern: /^[a-zA-Z0-9_]+$/,
  },
  email: {
    required: true,
    validate: (v) => v.includes("@") || "有効なメールアドレスを入力してください",
  },
  age: {
    min: 0,
    max: 150,
    // minLength: 3,  // エラー！number型にminLengthは使えない
  },
  password: {
    required: true,
    minLength: 8,
  },
};

// パスからパラメータ名を抽出
type ExtractRouteParams<Path extends string> =
  Path extends `${infer _}:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof ExtractRouteParams<Rest>]: string }
    : Path extends `${infer _}:${infer Param}`
      ? { [K in Param]: string }
      : {};

// パラメータの型を確認
type P1 = ExtractRouteParams<"/users/:id">;
// { id: string }

type P2 = ExtractRouteParams<"/users/:userId/posts/:postId">;
// { userId: string; postId: string }

type P3 = ExtractRouteParams<"/about">;
// {} （パラメータなし）

// 型安全なルーター
function createRoute<Path extends string>(
  path: Path,
  handler: (params: ExtractRouteParams<Path>) => void
) {
  // 実装...
}

// パスパラメータが自動推論される
createRoute("/users/:id", (params) => {
  console.log(params.id); // OK: string
  // params.name  // エラー！"name" は存在しない
});

createRoute("/users/:userId/posts/:postId", (params) => {
  console.log(params.userId);  // OK
  console.log(params.postId);  // OK
});

// ビルダーの設定状態を型で追跡
interface QueryConfig {
  table: string;
  select: string[];
  where: string;
  orderBy: string;
  limit: number;
}

type RequiredKeys = "table" | "select";

class QueryBuilder<Set extends string = never> {
  private config: Partial<QueryConfig> = {};

  from(table: string): QueryBuilder<Set | "table"> {
    this.config.table = table;
    return this as any;
  }

  columns(...cols: string[]): QueryBuilder<Set | "select"> {
    this.config.select = cols;
    return this as any;
  }

  where(condition: string): QueryBuilder<Set | "where"> {
    this.config.where = condition;
    return this as any;
  }

  // build() は必須プロパティがすべてセットされた場合のみ呼べる
  build(
    this: QueryBuilder<Set & RequiredKeys extends never ? never : Set>
  ): string {
    return `SELECT ...`;
  }
}

// 使用例
const query = new QueryBuilder()
  .from("users")
  .columns("id", "name")
  .where("active = true")
  .build();  // OK: table と select がセット済み

// new QueryBuilder().from("users").build();
// エラー！select がセットされていない

// 文字列が空でないことを保証する型
type NonEmptyString<S extends string> =
  S extends "" ? never : S;

function greet<S extends string>(name: NonEmptyString<S>): string {
  return `Hello, ${name}!`;
}

greet("Alice");  // OK
// greet("");       // エラー！空文字は許可されない

// オブジェクトのキーが重複していないことを保証
type UniqueArray<T extends readonly string[]> =
  T extends readonly [infer First extends string, ...infer Rest extends string[]]
    ? First extends Rest[number]
      ? never  // 重複あり
      : [First, ...UniqueArray<Rest> extends never ? never : Rest]
    : T;

// 型の等価性チェック
type Equals<X, Y> =
  (<T>() => T extends X ? 1 : 2) extends
  (<T>() => T extends Y ? 1 : 2) ? true : false;

// 型のアサーション（テスト用）
type Assert<T extends true> = T;

// 型テスト: 型が正しいことを検証
type _test1 = Assert<Equals<ReturnType<() => string>, string>>;  // OK
type _test2 = Assert<Equals<Exclude<"a" | "b", "b">, "a">>;      // OK
// type _test3 = Assert<Equals<string, number>>;  // エラー！

// 実務例: API エンドポイントの設定が正しいことを保証
type ValidEndpoint<T extends string> =
  T extends `/${string}` ? T : never;

function registerEndpoint<T extends string>(
  path: ValidEndpoint<T>
) { /* ... */ }

registerEndpoint("/api/users");   // OK
// registerEndpoint("api/users");  // エラー！/ で始まらない

実務パターンのまとめ

• フォームバリデーション: 条件型でフィールドの型に応じたルールを制限
• ルーティング: テンプレートリテラル型 + infer でパスパラメータを自動抽出
• Builder パターン: 型パラメータで設定状態を追跡し、必須項目の漏れを防止
• 型バリデーション: 条件型とテンプレートリテラル型で入力パターンを制限

// 危険: 深い再帰は "Type instantiation is excessively deep" エラーになる
type DeepNested<T, Depth extends number> =
  Depth extends 0 ? T : { nested: DeepNested<T, /* Depth - 1 */> };
// TypeScriptでは型レベルの算術は直接できない

// 対策1: タプルを使ったカウンタ
type BuildTuple<N extends number, T extends any[] = []> =
  T["length"] extends N ? T : BuildTuple<N, [...T, unknown]>;

type Length3 = BuildTuple<3>; // [unknown, unknown, unknown]

// 対策2: 再帰の深さを制限する
type MaxDepth = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

type SafeDeepPartial<T, D extends number = 5> = [D] extends [never]
  ? T  // 深さ上限に達したらそのまま返す
  : {
      [K in keyof T]?: T[K] extends object
        ? SafeDeepPartial<T[K], MaxDepth[D]>
        : T[K]
    };

// 対策3: ts-toolbelt などのライブラリを活用
// npm install ts-toolbelt で型レベルの数値演算が可能に

注意：TypeScript の再帰型の深度制限は、通常の型のインスタンス化で約50レベル、条件型の再帰で約1000レベルです（バージョンにより異なります）。実務では5〜10レベル程度の再帰に収めるのが安全です。

// 悪い例: ユニオンの組み合わせ爆発
type BigUnion = "a" | "b" | "c" | ... | "z"; // 26要素
type Explosion = `${BigUnion}-${BigUnion}-${BigUnion}`;
// 26 x 26 x 26 = 17,576通りのリテラル型！非常に遅くなる

// 良い例: 必要な組み合わせだけを定義
type ValidCombination =
  | "a-b-c"
  | "x-y-z"
  | "d-e-f";

// パフォーマンス計測: --generateTrace オプション
// tsc --generateTrace traceDir
// Chrome DevTools の Performance タブで trace.json を分析

// キャッシュを意識した型設計
// 悪い例: 毎回展開される
type BadPattern<T> = {
  [K in keyof T]: T[K] extends object ? SomeComplexTransform<T[K]> : T[K]
};

// 良い例: 中間型を使ってキャッシュ
type CachedTransform<T> = SomeComplexTransform<T>;
type GoodPattern<T> = {
  [K in keyof T]: T[K] extends object ? CachedTransform<T[K]> : T[K]
};

// 1. 型の「展開」ユーティリティ（ホバーで中身を確認）
type Prettify<T> = {
  [K in keyof T]: T[K]
} & {};

// Prettify なし: ホバーすると Pick<User, "name" | "email"> と表示
// Prettify あり: ホバーすると { name: string; email: string } と展開表示
type PickedUser = Prettify<Pick<User, "name" | "email">>;

// 2. 型のステップ分割
// 複雑な型を段階的に分解して、各ステップをホバーで確認
type Step1 = keyof User;            // "id" | "name" | ...
type Step2 = Exclude<Step1, "id">;  // "name" | ...
type Step3 = Pick<User, Step2>;      // { name: ...; ... }

// 3. // @ts-expect-error でネガティブテスト
// @ts-expect-error: number は string に割り当てられない
const bad: string = 42;

// 4. 型のログ出力（コンパイラがエラーメッセージで型を表示）
type Debug<T> = { [K in keyof T]: T[K] };
// 意図的にエラーを起こして型を確認
// const _debug: Debug<SomeComplexType> = null as any as number;
// エラーメッセージに展開された型が表示される

// 5. tsc --noEmit で型チェックだけ実行
// npx tsc --noEmit --extendedDiagnostics
// 型チェックの時間やメモリ使用量を確認できる

ポイント：Prettify ユーティリティ型は、VS Code でのホバー表示を改善する非常に便利なテクニックです。複雑な型のインターセクションや Pick/Omit の結果を展開して読みやすくしてくれます。すべてのプロジェクトに入れておくことをおすすめします。

// --- マップ型ベース ---

// Partial<T>: すべてのプロパティをオプショナルに
type Partial<T> = { [P in keyof T]?: T[P] };

// Required<T>: すべてのプロパティを必須に
type Required<T> = { [P in keyof T]-?: T[P] };

// Readonly<T>: すべてのプロパティを読み取り専用に
type Readonly<T> = { readonly [P in keyof T]: T[P] };

// Pick<T, K>: 指定したキーのみを抽出
type Pick<T, K extends keyof T> = { [P in K]: T[P] };

// Record<K, V>: キーと値の型を指定してオブジェクトを生成
type Record<K extends string | number | symbol, T> = { [P in K]: T };

// --- 条件型ベース ---

// Exclude<T, U>: ユニオンから除外
type Exclude<T, U> = T extends U ? never : T;

// Extract<T, U>: ユニオンから抽出
type Extract<T, U> = T extends U ? T : never;

// NonNullable<T>: null と undefined を除外
type NonNullable<T> = T & {};

// --- infer ベース ---

// ReturnType<T>: 関数の戻り値型
type ReturnType<T extends (...args: any) => any> =
  T extends (...args: any) => infer R ? R : any;

// Parameters<T>: 関数のパラメータ型
type Parameters<T extends (...args: any) => any> =
  T extends (...args: infer P) => any ? P : never;

// ConstructorParameters<T>: コンストラクタのパラメータ型
type ConstructorParameters<T extends abstract new (...args: any) => any> =
  T extends abstract new (...args: infer P) => any ? P : never;

// InstanceType<T>: コンストラクタのインスタンス型
type InstanceType<T extends abstract new (...args: any) => any> =
  T extends abstract new (...args: any) => infer R ? R : any;

// --- マップ型 + 条件型 の組み合わせ ---

// Omit<T, K>: 指定したキーを除外
type Omit<T, K extends string | number | symbol> =
  { [P in Exclude<keyof T, K>]: T[P] };

// ストアの定義型
interface StoreDefinition<S, G, A> {
  state: () => S;
  getters?: G & ThisType<S & GetterReturnTypes<G>>;
  actions?: A & ThisType<S & GetterReturnTypes<G> & A>;
}

// ゲッターの戻り値型を抽出
type GetterReturnTypes<G> = {
  readonly [K in keyof G]: G[K] extends (...args: any[]) => infer R ? R : never
};

// ストアの型を統合
type Store<S, G, A> = S & GetterReturnTypes<G> & A & {
  $patch: (partial: DeepPartial<S>) => void;
  $subscribe: <K extends keyof S>(
    key: K,
    callback: (newVal: S[K], oldVal: S[K]) => void
  ) => () => void;
};

// defineStore 関数
function defineStore<S, G, A>(
  definition: StoreDefinition<S, G, A>
): Store<S, G, A> {
  // 実装...
  return {} as any;
}

// 使用例: すべての型が自動推論される
const store = defineStore({
  state: () => ({
    count: 0,
    name: "TypeScript",
    items: [] as string[],
  }),

  getters: {
    doubleCount() { return this.count * 2; },
    itemCount() { return this.items.length; },
    summary() { return `${this.name}: ${this.doubleCount}`; },
  },

  actions: {
    increment() { this.count++; },
    addItem(item: string) { this.items.push(item); },
    async fetchItems() {
      const res = await fetch("/api/items");
      this.items = await res.json();
    },
  },
});

// store の型: すべて自動推論される
store.count;        // number
store.doubleCount;  // number（getter）
store.increment();  // void（action）
store.addItem("hello"); // void

// $subscribe で変更を監視（キーが型安全）
store.$subscribe("count", (newVal, oldVal) => {
  // newVal, oldVal は number と推論される
  console.log(`count: ${oldVal} → ${newVal}`);
});

// ═══════════════════════════════════════
// 条件型（Conditional Types）
// ═══════════════════════════════════════

// 基本形
type If<C extends boolean, T, F> = C extends true ? T : F;

// 型の抽出
type Unwrap<T> = T extends Promise<infer U> ? U : T;

// 分配防止
type NoDist<T, U> = [T] extends [U] ? true : false;

// ═══════════════════════════════════════
// マップ型（Mapped Types）
// ═══════════════════════════════════════

// 基本変換
type Transform<T> = { [K in keyof T]: NewType };

// 修飾子の追加/削除
type AddReadonly<T> = { readonly [K in keyof T]: T[K] };
type RemoveOptional<T> = { [K in keyof T]-?: T[K] };

// キーリマッピング
type Rename<T> = { [K in keyof T as `new_${string & K}`]: T[K] };

// キーフィルタリング
type Filter<T, V> = { [K in keyof T as T[K] extends V ? K : never]: T[K] };

// ═══════════════════════════════════════
// テンプレートリテラル型
// ═══════════════════════════════════════

// パターンマッチ
type Match = `${"GET"|"POST"} /${string}`;

// 文字列解析
type Parse<S> = S extends `${infer A}.${infer B}` ? [A, B] : [S];

// ═══════════════════════════════════════
// よく使うパターン
// ═══════════════════════════════════════

// 型の展開（デバッグ用）
type Prettify<T> = { [K in keyof T]: T[K] } & {};

// 値の型からユニオンを生成
type ValueOf<T> = T[keyof T];

// 配列からユニオン
type ArrayToUnion<T extends readonly any[]> = T[number];

この記事のまとめ

• 条件型（T extends U ? X : Y）で型レベルの条件分岐ができる
• infer キーワードで型パターンから部分型を抽出できる
• 分配条件型はユニオンの各メンバーに対して個別に評価される（[T] で防止可能）
• マップ型（{[K in keyof T]: ...}）でオブジェクト型を一括変換できる
• 修飾子（readonly, ?）の追加（+）と削除（-）が可能
• as 句でキーの名前を変換・フィルタリングできる
• テンプレートリテラル型で文字列パターンを型として表現できる
• ユニオンとの組み合わせで全パターンが自動生成される
• インデックスアクセス型（T[K], T[number]）でネストした型を取得できる
• これらを組み合わせて DeepPartial、イベントシステム、APIレスポンス変換などの実務パターンが構築できる
• 再帰型の深度制限やコンパイル速度に注意し、Prettify でデバッグする

次のステップ：この記事の知識を定着させるために、実際のプロジェクトで DeepPartial や Prettify を使ってみてください。また、TypeScript の公式ドキュメントや type-challenges リポジトリで型パズルに挑戦することで、型プログラミングのスキルが飛躍的に向上します。