React + TypeScript 开发速查手册

做 React 项目的人都知道，TypeScript 已经是标配了。但写 TypeScript 版的 React 组件，跟写纯 JS 的差别不小。类型怎么定、泛型怎么用、Hooks 怎么加类型，这些问题每个开发者都会遇到。

GitHub 上有个仓库专门解决这件事，4.7 万 Star，叫 React TypeScript Cheatsheet。

这份速查表到底覆盖了什么

从基础的函数组件 Props 类型定义，到 Hooks 的泛型用法，再到 forwardRef、Context、Error Boundaries 这些进阶场景，基本都涵盖了。每个知识点都配了可直接复制的代码示例，不是那种只讲理论的文档。

举个例子，useCallback 在 React 18 之前和之后的类型签名不一样。18 以后函数参数默认不再是 any[]，如果你之前习惯不写参数类型，升级后可能会遇到隐式 any 的报错。这份速查表把这类版本差异都标清楚了。

再比如 useReducer，用 Discriminated Union 来定义 action 类型，配合 TypeScript 的类型推导，能在编译阶段就捕获到错误的 action 拼写。这种写法在实际项目里很实用，但很多教程都不提。

为什么能拿到 4.7 万 Star

这个仓库的定位很精准。它不是教你学 React，也不是教你学 TypeScript，而是专门讲"两者结合"时会遇到的问题。

内容组织也有讲究。从 Setup 开始，讲怎么用 Next.js、Remix、Gatsby、Expo 搭建 React + TypeScript 项目，然后是组件写法、Hooks 类型、表单事件处理、Context、泛型 forwardRef，一路讲到 Error Boundaries 和并发模式。

每个章节都有"最佳实践"和"常见坑"的区分。比如 React.FC 到底该不该用，仓库里给出了明确的建议：在 React 17 + TypeScript 5.1 以上的环境里，不需要用。如果你还在用旧版本，它也解释了为什么建议去掉。

实际使用场景

刚从 JS 迁移到 TS 的团队，这份速查表能省掉大量踩坑时间。组件 Props 怎么定类型、事件处理函数怎么声明、Ref 怎么用泛型，都有现成的代码可以参考。

写可复用组件库的开发者也会用到。特别是用到泛型组件的场景，比如一个通用的 Select 组件，需要根据传入的选项类型自动推导选中值的类型，速查表里有详细的 forwardRef 泛型写法。

还有一个在线文档版本，部署在 Netlify 上，支持搜索和目录导航。不方便翻 GitHub 的时候，直接看网页版也行。

一点不足

内容覆盖面广，但有些章节的解释偏简略。比如 Error Boundaries 的 TypeScript 写法，只给了两种方案，没有展开讲错误回调函数的类型定义。对于需要深度定制的场景，还是得自己查 React 和 TypeScript 的官方文档。

另外，仓库主要面向英文社区，中文开发者阅读需要一定的英语基础。不过代码示例本身是通用的，直接复制就能用。

总的来说，如果你在做 React + TypeScript 的项目，这份速查表值得收藏。它不是教程，是一本随时翻阅的工具书。遇到类型问题先查一遍，大概率能找到答案。

收藏。它不是教程，是一本随时翻阅的工具书。遇到类型问题先查一遍，大概率能找到答案。