TypeScript：Claude Code 实战指南

ジェネリクスを通过 Claude Code自在に操る

TypeScriptのジェネリクスは、再利用性の高い类型安全なコードを書くための強力な仕組みです。Claude Code ジェネリクスのパターンを深く理解しており、合适的类型参数の设计から複雑な制約の記述まで的確にサポートしてくれます。

基本的ジェネリック函数の生成

まずは让 Claude Codeシンプルなジェネリック函数を生成してもらいましょう。

> 数组から重複を除去するジェネリック函数创建。
> 对象数组にも支持し、キーを指定できるようにして。

function uniqueBy<T, K extends keyof T>(array: T[], key?: K): T[] {
  if (!key) {
    return [...new Set(array)];
  }
  const seen = new Map<T[K], T>();
  for (const item of array) {
    const value = item[key];
    if (!seen.has(value)) {
      seen.set(value, item);
    }
  }
  return [...seen.values()];
}

// Usage example
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 1, name: "Alice (duplicate)" },
];

const unique = uniqueBy(users, "id");
// => [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]

K extends keyof T という制約により、存在しない属性を指定すると编译時に错误になります。

条件类型使用…的高度なパターン

Claude Code 条件类型（Conditional Types）も的確に生成します。

> API响应の类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型を、成功時と错误時で分岐するジェネリック类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型を作って。
> ステータスコードに応じて类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型が変わるようにして。

type ApiResult<T, E = Error> =
  | { status: "success"; data: T; error: never }
  | { status: "error"; data: never; error: E };

type ExtractData<R> = R extends { status: "success"; data: infer D } ? D : never;
type ExtractError<R> = R extends { status: "error"; error: infer E } ? E : never;

// 响应处理程序ー
function handleResponse<T>(result: ApiResult<T>): T {
  if (result.status === "success") {
    return result.data; // 类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型が T に絞り込まれる
  }
  throw result.error;
}

// Usage example
interface User {
  id: string;
  name: string;
}

const result: ApiResult<User> = await fetchUser("123");
const user = handleResponse(result); // 类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型は User

ジェネリック类でリポジトリパターン

数据アクセス層をジェネリクスで抽象化するパターンも、让 Claude Code任せると高效的。

interface Entity {
  id: string;
  createdAt: Date;
  updatedAt: Date;
}

interface Repository<T extends Entity> {
  findById(id: string): Promise<T | null>;
  findMany(filter: Partial<T>): Promise<T[]>;
  create(data: Omit<T, "id" | "createdAt" | "updatedAt">): Promise<T>;
  update(id: string, data: Partial<Omit<T, "id">>): Promise<T>;
  delete(id: string): Promise<void>;
}

class PrismaRepository<T extends Entity> implements Repository<T> {
  constructor(private model: any) {}

  async findById(id: string): Promise<T | null> {
    return this.model.findUnique({ where: { id } });
  }

  async findMany(filter: Partial<T>): Promise<T[]> {
    return this.model.findMany({ where: filter });
  }

  async create(data: Omit<T, "id" | "createdAt" | "updatedAt">): Promise<T> {
    return this.model.create({ data });
  }

  async update(id: string, data: Partial<Omit<T, "id">>): Promise<T> {
    return this.model.update({ where: { id }, data });
  }

  async delete(id: string): Promise<void> {
    await this.model.delete({ where: { id } });
  }
}

ジェネリクスの制約を活用したビルダーパターン

类型参数の制約を組み合わせた类型安全なビルダーも生成可以。

type QueryBuilder<T extends Record<string, unknown>> = {
  where<K extends keyof T>(key: K, value: T[K]): QueryBuilder<T>;
  orderBy<K extends keyof T>(key: K, direction: "asc" | "desc"): QueryBuilder<T>;
  select<K extends keyof T>(...keys: K[]): QueryBuilder<Pick<T, K>>;
  execute(): Promise<T[]>;
};

function createQuery<T extends Record<string, unknown>>(
  table: string
): QueryBuilder<T> {
  const conditions: string[] = [];
  const orders: string[] = [];
  let selectedFields: string[] = [];

  const builder: QueryBuilder<T> = {
    where(key, value) {
      conditions.push(`${String(key)} = '${value}'`);
      return builder as any;
    },
    orderBy(key, direction) {
      orders.push(`${String(key)} ${direction}`);
      return builder;
    },
    select(...keys) {
      selectedFields = keys.map(String);
      return builder as any;
    },
    async execute() {
      // 実際の查询実行ロジック
      return [];
    },
  };

  return builder;
}

Claude Codeへの有效的プロンプト

ジェネリクスを让 Claude Code依頼する際のコツをまとめます。

1. 具体的使用例を示す - 「こ这样的入输出になる函数」と伝える
2. 制約を明示する - 「TはRecord类型に限定」など类型制約を指定する
3. ユースケースを複数提示する - 多様な使い方を示すと精度が上がる

> ジェネリック类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型 DeepPartial<T> を作って。
> ネストした对象の所有的属性をオプショナルにする。
> 数组の要素もDeepPartialにして。

type DeepPartial<T> = T extends (infer U)[]
  ? DeepPartial<U>[]
  : T extends object
    ? { [K in keyof T]?: DeepPartial<T[K]> }
    : T;

总结

Claude Code ジェネリクスの生成と优化に非常に強力です。类型参数の设计、制約の付与、条件类型の活用など、複雑なパターンもプロンプト一つで实现可以。

TypeScriptの类型活用を进一步深めたい方はTypeScript开发を加速する実践Tipsを、ユーティリティ类型の応用はユーティリティ类型活用指南。此外、TypeScript公式ハンドブックのジェネリクスも併せて确认すると理解が深まります。