TypeScript dengan Claude Code

utilitas型で型definisiをefisiensi

TypeScript utilitas型 、既存 型 konversi 新しい型 作るmekanisme.Claude Code 標準utilitas型 pemanfaatan juga ちろん、proyek固有 カスタムutilitas型 設計 juga 力 発揮.

実践pemanfaatan 標準utilitas型

Claude Code 「型 konversi 」 dan 伝えるだけ 、tepatなutilitas型 選択 くれ.

> User型 dari form用 型 buatkan.
> 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">>;

// 新規pembuatan時 必須フィールド penentuan
type CreateUserData = Required<Pick<User, "name" | "email" | "role">> &
  Partial<Pick<User, "bio">>;

pemanfaatan Record型とMapped Types

pengaturanやマッピングdefinisi Record型 praktis.

// ロールご dan izinマッピング
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"],
};

// formフィールド validasiルール
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 },
};

設計 カスタムutilitas型

Claude Code proyek固有 utilitas型 依頼 dan 、tepatな設計 提案 くれ.

> APIresponse dengan 使うカスタムutilitas型 設計して。
> pagination、sort、フィルタ support.

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

// sortdimungkinkanなフィールド 抽出
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];
};

// 組み合わせて使う
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 で型を絞り込む

ユニオン型 dari 型 抽出・除外 juga Claude Code 依頼 dan 素早くimplementasi bisa dilakukan.

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 utilitas型 dan 組み合わせるpola.

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

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

// CSSstyleobjek 型
type StyleObject = Partial<Record<CSSDirectionalProperty, string | number>>;

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

ポイント praktisな使い方

Claude Code utilitas型 依頼 際 コツ.

• **konversi前後 型 明示 ** - 「User型 dari こういう型 作って」 dan 伝える
• **用途 説明 ** - 「form用」「APIresponse用」 dll.文脈 示す
• **既存 型definisi berbagi ** - 元 なる型 見せる dan 精度 上 る

Summary

utilitas型 使いこなすこ dan 、型definisi 重複 減らしmaintainability 高いコードベース 実現 bisa dilakukan.Claude Code kompleksな型konversi juga sekali jalan generate く 、型パズル 悩む時間 大幅 削減 bisa dilakukan.

ジェネリクス 基礎 TypeScriptジェネリクス実践panduan 、validasi dan integrasi Zodvalidasi実践panduan silakan lihat.TypeScript公式 utilitas型referensi juga bisa dijadikan referensi.