Astuces TypeScript avec Claude Code

TypeScriptとClaude Codeは最高の組み合わせ

Claude CodeはTypeScriptの型システムを深く理解しており、型定義の自動生成から高度なジェネリクスの活用まで幅広くサポートできます。型エラーのない堅牢なコードを高速に書く方法を紹介します。

Tips 1：APIレスポンスの型を自動生成

APIのレスポンスから型定義を自動生成させましょう。

> このAPIエンドポイントのレスポンスに基づいて型定義を作成して。
> curl http://localhost:3000/api/users/1 の結果を使って。

// Generated type definitions
interface User {
  id: string;
  email: string;
  profile: {
    firstName: string;
    lastName: string;
    avatar: string | null;
  };
  roles: Role[];
  createdAt: string;
  updatedAt: string;
}

interface Role {
  id: string;
  name: "admin" | "editor" | "viewer";
  permissions: string[];
}

interface ApiResponse<T> {
  data: T;
  meta: {
    requestId: string;
    timestamp: string;
  };
}

type UserResponse = ApiResponse<User>;
type UsersResponse = ApiResponse<User[]> & {
  meta: { page: number; total: number };
};

Tips 2：any型の撲滅

プロジェクト内のany型を一括で適切な型に変換できます。

> プロジェクト内の any 型をすべて検索して、
> 適切な型に変換して。
> 変換後に npx tsc --noEmit で型チェックを通して。

Tips 3：ユーティリティ型の活用

Claude Codeは適切なユーティリティ型を提案してくれます。

> User型から更新用の型を作って。
> id, createdAt, updatedAt は含めないで、全フィールドをオプショナルに。

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

Tips 4：Zodスキーマから型を導出

バリデーションスキーマと型定義の二重管理を解消します。

> Zodスキーマを定義して、そこから型を導出するパターンに
> リファクタリングして。手動の型定義はDelete。

import { z } from "zod";

const UserSchema = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
  name: z.string().min(1).max(100),
  role: z.enum(["admin", "editor", "viewer"]),
  isActive: z.boolean().default(true),
});

// 型はスキーマから自動導出
type User = z.infer<typeof UserSchema>;

const CreateUserSchema = UserSchema.omit({ id: true });
type CreateUserInput = z.infer<typeof CreateUserSchema>;

Tips 5：型ガードの自動生成

ランタイムでの型チェック関数を自動生成させます。

> ApiError, NetworkError, ValidationError の
> 型ガード関数を作成して。

interface ApiError {
  type: "api";
  statusCode: number;
  message: string;
}

interface NetworkError {
  type: "network";
  cause: Error;
}

interface ValidationError {
  type: "validation";
  fields: Record<string, string[]>;
}

type AppError = ApiError | NetworkError | ValidationError;

function isApiError(error: AppError): error is ApiError {
  return error.type === "api";
}

function isNetworkError(error: AppError): error is NetworkError {
  return error.type === "network";
}

function isValidationError(error: AppError): error is ValidationError {
  return error.type === "validation";
}

エラー型の設計パターンについてはエラーハンドリング設計パターンで詳しく解説しています。

Tips 6：ジェネリクスの活用

Claude Codeは複雑なジェネリクスも正確に書けます。

> 型安全なイベントエミッターを作成して。
> イベント名と引数の型を静的にチェックできるように。

type EventMap = {
  "user:login": { userId: string; timestamp: Date };
  "user:logout": { userId: string };
  "error": { message: string; code: number };
};

class TypedEventEmitter<T extends Record<string, unknown>> {
  private listeners = new Map<keyof T, Set<(data: never) => void>>();

  on<K extends keyof T>(event: K, listener: (data: T[K]) => void): void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event)!.add(listener as (data: never) => void);
  }

  emit<K extends keyof T>(event: K, data: T[K]): void {
    this.listeners.get(event)?.forEach(fn => fn(data as never));
  }
}

const emitter = new TypedEventEmitter<EventMap>();
emitter.on("user:login", (data) => {
  // data は { userId: string; timestamp: Date } と推論される
  console.log(data.userId);
});

CLAUDE.mdでTypeScriptルールを設定

## TypeScriptルール
- strictモードを有効にすること
- any型の使用は禁止
- 型アサーション(as)は最小限に
- ユーティリティ型を積極的に活用

生産性をさらに上げるTipsは生産性を3倍にする10のTipsを、React開発での活用法はReact開発を爆速にする方法を参照してください。

Summary

Claude CodeはTypeScriptの型システムを深く理解しており、型定義の自動生成から高度なジェネリクスまで正確に対応できます。型安全性を維持しながら開発速度を向上させましょう。

TypeScriptの詳細はTypeScript公式ドキュメント、Claude CodeについてはAnthropic公式ドキュメントを参照してください。