TypeScript：Claude Code 实战指南

ユーティリティ类型で类型定義を效率化する

TypeScriptのユーティリティ类型は、既存の类型を変換して新しい类型を作る仕組みです。Claude Code 標準ユーティリティ类型の活用は当然、项目固有のカスタムユーティリティ类型の设计にも力を発揮します。

標準ユーティリティ类型の実践活用

让 Claude Code「类型を変換して」と伝える只需、合适的ユーティリティ类型を选择してくれます。

> User类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型から表单用の类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型を作って。
> id, createdAt, updatedAtは除外し、残りはすべてオプショナルに。

interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
  bio: string;
  createdAt: Date;
  updatedAt: Date;
}

// Claude Code 生成する类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型
type UserFormData = Partial<Omit<User, "id" | "createdAt" | "updatedAt">>;

// 新規创建時は必須フィールドを指定
type CreateUserData = Required<Pick<User, "name" | "email" | "role">> &
  Partial<Pick<User, "bio">>;

Record类型とMapped Typesの活用

配置やマッピング定義にはRecord类型が便利です。

// ロールごとの権限マッピング
type Permission = "read" | "write" | "delete" | "admin";
type Role = "admin" | "editor" | "viewer";

const rolePermissions: Record<Role, Permission[]> = {
  admin: ["read", "write", "delete", "admin"],
  editor: ["read", "write"],
  viewer: ["read"],
};

// 表单フィールドの验证ルール
type ValidationRule<T> = {
  [K in keyof T]: {
    required?: boolean;
    minLength?: number;
    maxLength?: number;
    pattern?: RegExp;
    validate?: (value: T[K]) => string | true;
  };
};

const userValidation: ValidationRule<CreateUserData> = {
  name: { required: true, minLength: 2, maxLength: 50 },
  email: { required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
  role: { required: true },
  bio: { maxLength: 500 },
};

カスタムユーティリティ类型の设计

让 Claude Code项目固有のユーティリティ类型を依頼すると、合适的设计を提案してくれます。

> API响应で使うカスタムユーティリティ类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型を设计して。
> 分页、排序、フィルタに支持して。

// 分页付き响应
type Paginated<T> = {
  items: T[];
  total: number;
  page: number;
  perPage: number;
  totalPages: number;
  hasNext: boolean;
  hasPrev: boolean;
};

// 排序可能なフィールドを抽出
type SortableKeys<T> = {
  [K in keyof T]: T[K] extends string | number | Date ? K : never;
}[keyof T];

type SortParams<T> = {
  sortBy: SortableKeys<T>;
  sortOrder: "asc" | "desc";
};

// フィルタ类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型を自動生成
type FilterParams<T> = {
  [K in keyof T]?: T[K] extends string
    ? { contains?: string; equals?: string; startsWith?: string }
    : T[K] extends number
      ? { gte?: number; lte?: number; equals?: number }
      : T[K] extends Date
        ? { after?: Date; before?: Date }
        : T[K];
};

// 組み合わせて使う
type ListQuery<T> = Partial<SortParams<T>> &
  FilterParams<T> & {
    page?: number;
    perPage?: number;
  };

// Usage example
type UserListQuery = ListQuery<User>;
// => { sortBy?: "name" | "email" | "createdAt" | ..., page?: number, ... }

Extract / Exclude で类型を絞り込む

ユニオン类型からの类型の抽出・除外も让 Claude Code依頼すると快速实现可以。

type Event =
  | { type: "click"; x: number; y: number }
  | { type: "keypress"; key: string; code: number }
  | { type: "scroll"; scrollY: number }
  | { type: "resize"; width: number; height: number };

// 特定の事件だけ抽出
type MouseEvent = Extract<Event, { type: "click" }>;
// => { type: "click"; x: number; y: number }

// 事件处理程序ーの类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型を自動生成
type EventHandlers = {
  [E in Event as `on${Capitalize<E["type"]>}`]: (event: E) => void;
};
// => { onClick: (event: ...) => void; onKeypress: ... }

Template Literal Typesとの組み合わせ

TypeScript 4.1以降のTemplate Literal Typesをユーティリティ类型と組み合わせるパターンです。

type CSSProperty = "margin" | "padding" | "border";
type Direction = "top" | "right" | "bottom" | "left";

type CSSDirectionalProperty = `${CSSProperty}-${Direction}`;
// => "margin-top" | "margin-right" | ... | "border-left"

// CSS样式对象の类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型
type StyleObject = Partial<Record<CSSDirectionalProperty, string | number>>;

const style: StyleObject = {
  "margin-top": 16,
  "padding-left": "1rem",
};

実践的な使い方のポイント

让 Claude Codeユーティリティ类型を依頼する際のコツです。

• 変換前後の类型を明示する - 「User类型からこういう类型を作って」と伝える
• 用途を説明する - 「表单用」「API响应用」など文脈を示す
• 既存の类型定義を共有する - 元になる类型を見せると精度が上がる

总结

ユーティリティ类型を使いこなすことで、类型定義の重複を減らし可维护性の高いコードベースを実現可以。Claude Code 複雑な类型変換も一発で生成してくれるので、类型パズルに悩む时间を大幅に削減可以。

ジェネリクスの基礎はTypeScriptジェネリクス実践指南を、验证との联动はZod验证実践指南。TypeScript公式のユーティリティ类型参考也可以作为参考。