typescript

name	typescript
description	TypeScript standards and best practices with modern tooling. Use when working with TypeScript or TypeScript React files.

TypeScript Guidelines

Standards and best practices for TypeScript development with modern tooling. Follow these guidelines when writing or modifying TypeScript code.

Design Principles

Apply DRY, KISS, and SOLID consistently. Prefer functional approaches where relevant; use classes for stateful behavior. Use composition over inheritance. Each module should have a single responsibility. Use dependency injection for class dependencies.

Code Style

• Naming: Descriptive yet concise names for variables, functions, and classes
• Documentation: JSDoc comments for public APIs, complex logic, and non-obvious design decisions
• Type annotations: Be explicit with typing to reduce inference time; avoid any unless necessary
• Imports: Avoid barrel exports to prevent circular dependencies; prefer direct imports

Type Safety

• Strict TypeScript: Use strict mode with proper type definitions. Use type-safe patterns like Zod schemas for validation and type-safe DOM helpers where applicable.
• Avoid any: Use unknown instead of any when the type is truly unknown. Narrow types appropriately.
• Type inference: Be explicit with typing to reduce inference time and improve clarity

Type Patterns

• Union types: Use union types for values that can be one of several types
• Discriminated unions: Use discriminated unions for type-safe state machines
• Generic constraints: Use generic constraints to ensure type safety
• Utility types: Leverage TypeScript utility types (Pick, Omit, Partial, etc.)

Architecture

Module Organization

• Each module focuses on one concern with clear boundaries
• Extract reusable functions to avoid duplication
• Design for reusability across contexts
• Co-locate types with their usage or in dedicated type files
• Keep types at appropriate module boundaries

Dependency Management

• Use dependency injection for testability
• Prefer composition over inheritance
• Keep dependencies minimal and focused

Testing

Structure

• Tests mirror src/ directory structure
• Test files: *.test.ts or *.spec.ts
• Use descriptive test names
• Always check for appropriate unit tests when changing code

Quality

• Use AAA (Arrange, Act, Assert) pattern
• Tests should be useful, readable, concise, maintainable
• Test edge cases and error conditions
• Maintain test coverage for critical paths

Tools

• Vitest: Use Vitest for unit and integration tests (preferred over Jest)
• Use @vitest/coverage-v8 for coverage
• Use jsdom for DOM testing when needed
• Mock external dependencies appropriately
• Playwright: Use Playwright for end-to-end (E2E) tests

Code Formatting and Linting

Prettier

• Use Prettier for consistent code formatting
• Config: printWidth: 120, singleQuote: true, jsxSingleQuote: true
• Run pnpm format to format code
• Run pnpm format:check to check formatting

ESLint

• Use ESLint with TypeScript plugin
• Use @typescript-eslint/parser and @typescript-eslint/eslint-plugin
• Run pnpm lint to check linting
• Run pnpm lint:fix to auto-fix issues

Framework Recommendations

For Non-Heavy Client Interaction

• Astro: Excellent choice for content-focused sites, blogs, documentation
  • Minimal JavaScript by default
  • Static generation with server islands when needed
  • Great performance and SEO
  • TypeScript-first with excellent DX

For Heavy Client Interaction

• React, Svelte, or SolidJS with TypeScript
• Choose based on team preference and project requirements

Build Tools

• Vite: Preferred build tool for development and production (unless directed otherwise)
• Modern Rust-based tooling: Prefer Rolldown or other lower-level language tooling
  • Avoid Webpack and other older JavaScript-based bundlers unless specifically required

Package Management

• pnpm: Preferred package manager (faster, more efficient than npm/yarn)
• Use packageManager field in package.json
• Use pnpm workspaces for monorepos

Implementation

When implementing TypeScript code:

• Ensure code passes type checking before committing
• Group related changes with tests in atomic commits
• Check for existing workflow patterns (spec-first, TDD, etc.) and follow them

References

For monorepo-specific patterns using pnpm, see references/pnpm-monorepo.md.