TypeScript Development

Modern TypeScript development with React ecosystem.

Critical Rules
Verification
Quick Reference
Topics

Critical Rules

Always

Use strict mode in tsconfig
Type all function parameters and returns
Handle null/undefined explicitly
Use Server Components by default
Validate on both client and server
Test with screen readers
Measure before optimizing

Never

Use any (use unknown with type guards)
Use ! (non-null assertion) without justification
Store server data in client state (use React Query)
Rely on color alone for information
Create new functions in render
Skip error handling for API calls

Verification

After Editing TypeScript/JavaScript Files

Type Checking:

If tsc is available, run: npx tsc --noEmit
Checks entire project against tsconfig.json
Common fixes: add proper type annotations, use union types for nullable values, import types from @types/* packages

Linting:

If eslint is available, run: npx eslint {files}
To auto-fix issues: npx eslint --fix {files}

Bundle Analysis (for component files):

Check file size and LOC when modifying components
Warn if file > 100 KB or > 500 lines of code
Consider breaking into smaller components for large files
Use code splitting and lazy loading for heavy dependencies

Before Committing

Run type checker on the entire project
Run ESLint on modified files
Verify component sizes are reasonable
Check for console errors and warnings

Quick Reference

| Layer | Default | Alternatives | |-------|---------|--------------| | Language | TypeScript 5+ | JavaScript (ESM) | | Runtime | Node.js 22+ | Bun, Deno | | Framework | Next.js 14+ | Vite, Remix | | UI Library | React 18+ | - | | State (Client) | Zustand | Context + Reducer | | State (Server) | React Query | SWR | | Forms | React Hook Form + Zod | - | | Styling | Tailwind CSS + CVA | CSS Modules | | Testing | Vitest + RTL | Jest | | E2E Testing | Playwright | Cypress | | Package Manager | pnpm | npm, yarn |

Topics

| Topic | Use For | |-------|---------| | Core | Project setup, tsconfig, modern TS features, type utilities | | React | Components, hooks, Context API, performance patterns | | Next.js | App Router, Server/Client Components, Server Actions, routing | | Types | Advanced types, generics, conditional types, type guards | | State | Zustand, React Query, Context + Reducer, URL state | | Forms | React Hook Form, Zod validation, Server Actions integration | | API | Fetch wrappers, React Query, tRPC, GraphQL, WebSockets | | Testing | Vitest, React Testing Library, MSW, Playwright E2E | | Styling | Tailwind CSS, CVA variants, dark mode, responsive design | | Performance | Bundle analysis, code splitting, memoization, Web Vitals | | Accessibility | WCAG compliance, ARIA, keyboard navigation, screen readers | | Mobile | React Native, Expo, navigation, platform-specific code | | ESM | ESM patterns, JSDoc types, JS vs TS decision guide | | Debugging | Console methods, DevTools, source maps, async debugging |

typescript-development