Practical Tips for Accelerating TypeScript Development dengan Claude Code

TypeScript and Claude Code Are a Perfect Match

Claude Code has a deep understanding of TypeScript’s type system, supporting everything from automatic type generation to advanced generics. Here’s how to write robust, type-safe code at high speed.

Tip 1: Auto-Generate Types from API Responses

Let Claude Code auto-generate type definitions from your API responses.

> Create type definitions based on this API endpoint's response.
> Use the result from 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 };
};

Tip 2: Eliminate the any Type

You can batch-convert all any types in your project to proper types.

> Find all any types in the project and
> convert them to appropriate types.
> After conversion, run npx tsc --noEmit to verify type checking passes.

Tip 3: Leverage Utility Types

Claude Code suggests appropriate utility types for your use case.

> Create an update type from the User type.
> Exclude id, createdAt, and updatedAt, and make all fields optional.

// Type generated by Claude Code
type UpdateUserInput = Partial<Omit<User, "id" | "createdAt" | "updatedAt">>;

Tip 4: Derive Types from Zod Schemas

Eliminate the need to maintain both validation schemas and type definitions separately.

> Refactor to define Zod schemas and derive types from them.
> Delete the manual type definitions.

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

// Types are automatically derived from the schema
type User = z.infer<typeof UserSchema>;

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

Tip 5: Auto-Generate Type Guards

Have Claude Code generate runtime type-checking functions automatically.

> Create type guard functions for ApiError, NetworkError,
> and 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";
}

For more on error type design patterns, see Error Handling Design Patterns.

Tip 6: Use Generics Effectively

Claude Code can write even complex generics accurately.

> Create a type-safe event emitter.
> Make it statically check event names and argument types.

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 is inferred as { userId: string; timestamp: Date }
  console.log(data.userId);
});

Setting TypeScript Rules in CLAUDE.md

## TypeScript Rules
- Enable strict mode
- Do not use the any type
- Minimize type assertions (as)
- Actively use utility types

For more productivity tips, see 10 Tips to Triple Your Productivity. For React development, see How to Supercharge React Development.

Summary

Claude Code deeply understands TypeScript’s type system, accurately handling everything from auto-generating type definitions to advanced generics. Maintain type safety while boosting your development speed.

For TypeScript details, refer to the official TypeScript documentation. For Claude Code, see the official Anthropic documentation.