Claude Code के साथ TypeScript

utility型でtype definitionsをefficiency improvementする

TypeScriptのutility型は、既存の型を変換してनया型をबनाना仕組み है।Claude Codeは標準utility型のutilizationはもちろん、Project固有のカスタムutility型の設計にも力を発揮し है।

標準utility型の実践utilization

Claude Codeに「型を変換して」と伝える से ही、appropriateなutility型を選択してくれ है।

> User型 सेform用の型を作って。
> id, createdAt, updatedAtは除बाहरし、残りはसभीオプショナルに。

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

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

// 新規create時は必須fieldを指定
type CreateUserData = Required<Pick<User, "name" | "email" | "role">> &
  Partial<Pick<User, "bio">>;

Record型とMapped Typesのutilization

settingsやmapping定義にはRecord型がconvenient है।

// ロールごとの権限mapping
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"],
};

// formfieldのvalidationrule
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 },
};

カスタムutility型の設計

Claude CodeにProject固有のutility型を依頼すると、appropriateな設計を提案してくれ है।

> APIresponseでuse करनाカスタムutility型を設計して。
> pageネーション、sort、フィルタにsupportして。

// pageネーション付きresponse
type Paginated<T> = {
  items: T[];
  total: number;
  page: number;
  perPage: number;
  totalPages: number;
  hasNext: boolean;
  hasPrev: boolean;
};

// sortpossibleなfieldを抽出
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";
};

// フィルタ型を自動generate
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];
};

// 組み合わせてuse करना
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 को requestすると素早くimplementationでき है।

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

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

// eventhandlerの型を自動generate
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をutility型 के साथ combineるpattern है।

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

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

// CSSstyleオブジェクトの型
type StyleObject = Partial<Record<CSSDirectionalProperty, string | number>>;

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

実践的なuse करने का तरीकाのポイント

Claude Codeにutility型を依頼する際のコツ है।

• 変換पहलेबादの型を明示する - 「User型 सेこういう型を作って」と伝える
• 用途を説明する - 「form用」「APIresponse用」 आदि文脈を示す
• 既存のtype definitionsを共有する - 元になる型を見せると精度がऊपरがる

Summary

utility型 use करकेこなす बातで、type definitionsの重複を減らし保守性の高いcodeベースを実現でき है।Claude Codeはcomplexな型変換も一発でgenerateしてくれるので、型パズルに悩む時बीचを大幅に削減でき है।

genericsの基礎はTypeScriptgenerics実践ガイドを、validationとのintegrationはZodvalidation実践ガイドをदेखें。TypeScript公式のutility型リファレンスभी reference के लिएなり है।