Scan to join WeChat groupTypeScript Development
Modern TypeScript development with React ecosystem.
Stack Overview
| Layer | Default | Alternatives | |-------|---------|--------------| | Language | TypeScript 5+ | JavaScript (ESM) | | Runtime | Node.js 20+ | 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 |
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(useunknownwith 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