Tips & Tricks

TypeScript dengan Claude Code

Pelajari tentang typescript menggunakan Claude Code. Dilengkapi tips praktis dan contoh kode.

ジェネリクス dengan Claude Code: 自在に操る

TypeScript ジェネリクス 、再pemanfaatan性 高いtype safetyなコード 書く untuk 強力なmekanisme.Claude Code ジェネリクス pola 深く理解 、tepatな型parameter 設計 dari kompleksなbatasan 記述ま 的確 サポート くれ.

generate dasar的なgenericfungsi

Pertama-tama Claude Code シンプルなgenericfungsi generate juga らい.

> array dari 重複 除去するgenericfungsi buatkan.
> objekarray juga dukunganし、キー penentuan dengan きるよう.
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 dan いうbatasan より、存在し tidakproperti penentuan dan コンパイル時 error なり.

kondisi型を使った高度なpola

Claude Code kondisi型(Conditional Types) juga 的確 generate.

> APIresponse 型 、berhasil時 dan error時 dengan 分岐するgeneric型 buatkan.
> ステータスコード 応じて型 変わるよう.
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;

// responsehandler
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

genericclassでrepositorypola

データアクセス層 ジェネリクス 抽象化 pola juga 、Claude Code 任せる dan efisien.

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 } });
  }
}

batasanをpemanfaatanしたビルダーpola ジェネリクス

型parameter batasan 組み合わせたtype safetyなビルダー juga generate bisa dilakukan.

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() {
      // 実際 query実行ロジック
      return [];
    },
  };

  return builder;
}

効果的なプロンプト Claude Codeへ

ジェネリクス Claude Code 依頼 際 コツ ま dan め.

  1. spesifikなpenggunaan例 示す - 「こ seperti 入output なるfungsi」 dan 伝える
  2. **batasan 明示 ** - 「T Record型 限定」 dll.型batasan penentuan
  3. **ユースケース 複数提示 ** - 多様な使い方 示す dan 精度 上 る
> generic型 DeepPartial<T> buatkan.
> ネストしたobjek すべて properti オプショナル する。
> array elemen juga DeepPartial.
type DeepPartial<T> = T extends (infer U)[]
  ? DeepPartial<U>[]
  : T extends object
    ? { [K in keyof T]?: DeepPartial<T[K]> }
    : T;

Summary

Claude Code ジェネリクス generate dan optimasi 非常 強力.型parameter 設計、batasan 付与、kondisi型 pemanfaatan dll.、kompleksなpola juga プロンプト一つ implementasi bisa dilakukan.

TypeScript 型pemanfaatan Lebih lanjut深めたい方 TypeScriptpengembangan 加速 実践Tips 、utilitas型 penerapan lanjutan utilitas型pemanfaatanpanduan silakan lihat.Selain itu、TypeScript公式ハンドブック ジェネリクス juga 併せてkonfirmasi dan 理解 深まり.

#Claude Code #TypeScript #generics #type safety #design patterns