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 め.
- spesifikなpenggunaan例 示す - 「こ seperti 入output なるfungsi」 dan 伝える
- **batasan 明示 ** - 「T Record型 限定」 dll.型batasan penentuan
- **ユースケース 複数提示 ** - 多様な使い方 示す 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 理解 深まり.
PDF Gratis: Cheatsheet Claude Code dalam 5 Menit
Cukup masukkan emailmu dan kami akan langsung mengirim cheatsheet PDF A4 satu halaman.
Kami menjaga data pribadimu dengan aman dan tidak pernah mengirim spam.
Tentang Penulis
Masa
Engineer yang aktif menggunakan Claude Code. Mengelola claudecode-lab.com, media teknologi 10 bahasa dengan lebih dari 2.000 halaman.
Artikel Terkait
7 template CLAUDE.md untuk Claude Code yang bisa langsung dipakai di proyek nyata
Tujuh template CLAUDE.md praktis untuk app solo, situs konten, API, repo tim, dan codebase legacy, plus kegagalan yang perlu dihindari.
Panduan Approval dan Sandbox Claude Code | Pengaturan aman untuk kerja harian
Cara membagi aksi Claude Code ke allow, ask, deny, dan sandbox dengan settings praktis, hooks, dan contoh workflow nyata.
Panduan Lengkap Memulai Claude Code 2026 | 7 Langkah dari Nol hingga Siap Pakai di Dunia Kerja
Panduan pemula lengkap untuk pengguna baru Claude Code. Dari instalasi hingga mengintegrasikannya ke workflow pengembangan nyata — mencakup semua jebakan yang Masa hadapi di awal.