React + TypeScript 最佳实践

Q: 什么是React + TypeScript 最佳实践？适合做什么项目？

类型安全 React：判别联合、泛型组件和 TanStack Query 数据获取。 它通过分层组合提供端到端类型安全与开箱即用的部署体验，适合从 MVP 到生产 SaaS 的快速迭代。

Q: React + TypeScript 最佳实践 的最佳实践有哪些？

React + TypeScript 最佳实践 的最佳实践包括：启用 strict + noUncheckedIndexedAccess — 编译时捕获 null/undefined；状态用判别联合 — 穷尽 switch 检查防止遗漏 case；所有服务端状态用 TanStack Query — 缓存、重试、刷新已处理，无 useEffect。其中首条「启用 strict + noUncheckedIndexedAccess — 编译时捕获 null/undefined」应在项目初始化时就落地，避免后期返工。

类型安全 React：判别联合、泛型组件和 TanStack Query 数据获取。

全栈中等

技术栈组成

FrameworkReact 19 + Vite

LanguageTypeScript 5.6

DataTanStack Query 5

Formsreact-hook-form + Zod

StylingTailwindCSS 4

TestingVitest + Testing Library

为什么

TypeScript 在编译时捕获 80% 的 bug。判别联合让不可能的状态无法表达。

TanStack Query 处理缓存、重试和后台刷新 — 消除每个数据源 200 行 useEffect 样板。

何时使用

选择 React+TS 用于 SPA、设计系统和复杂状态仪表板。避免内容站点（用 Astro）或团队缺乏 TS 经验（高级类型学习曲线陡峭）。

如何做

1. 脚手架 — npm create vite@latest myapp -- --template react-ts 2. 严格 TS — tsconfig：strict、noUncheckedIndexedAccess、exactOptionalPropertyTypes 3. 类型组件 — props 接口扩展 HTMLAttributes，用 ComponentProps<> 4. 判别联合 — type: "loading" | "success" | "error" 做状态机 5. TanStack Query — GET 用 useQuery，POST 用 useMutation，queryKey 做缓存 6. 表单 — react-hook-form + zodResolver，handleSubmit 端到端类型安全 7. 测试 — Vitest + @testing-library/react，测行为非实现 8. 代码检查 — eslint + typescript-eslint，strict-type-checked 规则集

示例

// 判别联合 — 不可能的状态无法表达 type RequestState<T> = | { status: "idle" } | { status: "loading" } | { status: "success"; data: T } | { status: "error"; error: Error }; function UserView({ state }: { state: RequestState<User> }) { switch (state.status) { case "idle": return <p>点击加载</p>; case "loading": return <Spinner />; case "error": return <ErrorMessage error={state.error} />; case "success": return <UserCard user={state.data} />; // TS 知道 data 存在 } } // TanStack Query — 类型安全数据获取带缓存 import { useQuery } from "@tanstack/react-query"; function useUser(id: string) { return useQuery({ queryKey: ["user", id], queryFn: () => fetch(`/api/users/${id}`).then((r) => r.json() as Promise<User>), staleTime: 60_000, // 1 分钟后刷新 }); } // 泛型类型组件 function List<T>({ items, render }: { items: T[]; render: (item: T) => ReactNode }) { return <ul>{items.map((item, i) => <li key={i}>{render(item)}</li>)}</ul>; } // 用法：<List items={users} render={(u) => u.name} /> — T 推断为 User

常见问题

⚠any 类型逃逸 — 用 @typescript-eslint/no-explicit-any 禁用，用 unknown + 收窄
⚠useEffect 做数据获取 — 导致竞态，改用 TanStack Query
⚠属性穿透 5+ 层 — 用 Context 或传回调，非中间属性
⚠动态列表 key={index} — 重新渲染破坏，用稳定 ID

最佳实践

✓启用 strict + noUncheckedIndexedAccess — 编译时捕获 null/undefined
✓状态用判别联合 — 穷尽 switch 检查防止遗漏 case
✓所有服务端状态用 TanStack Query — 缓存、重试、刷新已处理，无 useEffect
✓用 Testing Library 测试 — queryByRole/Text，断言可访问行为

常见问题解答

什么是React + TypeScript 最佳实践？适合做什么项目？

类型安全 React：判别联合、泛型组件和 TanStack Query 数据获取。它通过分层组合提供端到端类型安全与开箱即用的部署体验，适合从 MVP 到生产 SaaS 的快速迭代。

如何用React + TypeScript 最佳实践在 10 分钟内跑通一个 demo？

两步起步：① 脚手架 — npm create vite@latest myapp -- --template react-ts；② 严格 TS — tsconfig：strict、noUncheckedIndexedAccess、exactOptionalPropertyTypes。先跑通本地 dev server，再接一个真实数据源验证端到端链路。