writing-typescript

julianobarbosa's avatarfrom julianobarbosa

Idiomatic TypeScript development. Use when writing TypeScript code, Node.js services, React apps, or discussing TS patterns. Emphasizes strict typing, composition, and modern tooling (bun/vite).

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 3, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill facilitates idiomatic TypeScript development by enforcing modern best practices, strict type safety, and efficient architectural patterns. It specializes in building robust Node.js services and React applications while leveraging high-performance tools like Bun and Vite to ensure scalable and maintainable codebases.

Use Cases

  • Developing type-safe Node.js backend services using strict compiler options and functional composition.
  • Building modern React frontends with Vite, focusing on optimized component patterns and explicit state management.
  • Refactoring legacy JavaScript or loosely typed TypeScript code into strictly typed, idiomatic structures using advanced patterns like Discriminated Unions.
  • Setting up high-performance development environments with Bun for package management and Vitest for rapid unit testing.
  • Implementing complex data validation logic using the 'Parse, don't validate' principle to ensure runtime type safety at system boundaries.
namewriting-typescript
descriptionIdiomatic TypeScript development. Use when writing TypeScript code, Node.js services, React apps, or discussing TS patterns. Emphasizes strict typing, composition, and modern tooling (bun/vite).
allowed-toolsRead, Bash, Grep, Glob

TypeScript Development (2025)

Core Principles

  • Strict typing: Enable all strict checks
  • Parse, don't validate: Transform untrusted data at boundaries
  • Composition over inheritance: Small, focused functions
  • Explicit over implicit: No any, prefer unknown

Toolchain

bun          # Runtime + package manager (fast)
vite         # Frontend bundling
vitest       # Testing
eslint       # Linting
prettier     # Formatting

Quick Patterns

Type Guards

function isUser(value: unknown): value is User {
  return typeof value === "object" && value !== null && "id" in value;
}

Discriminated Unions

type Result<T, E = Error> = { ok: true; value: T } | { ok: false; error: E };

function processResult<T>(result: Result<T>): T {
  if (result.ok) return result.value;
  throw result.error;
}

Utility Types

type UserUpdate = Partial<User>;
type UserSummary = Pick<User, "id" | "name">;
type UserWithoutPassword = Omit<User, "password">;
type ReadonlyUser = Readonly<User>;

tsconfig.json Essentials

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "isolatedModules": true
  }
}

References

Commands

bun install              # Install deps
bun run build            # Build
bun test                 # Test
bun run lint             # Lint
bun run format           # Format