用途:在编写 React 组件时提供 TypeScript 类型实践指导,适用于构建带类型的组件、泛型组件、事件处理器、表单、refs,使用 React 19 新特性(Actions、Server Components、use()),以及 TanStack Router 集成和自定义 hooks 的类型标注。不适用于非 React 的 TypeScript 或纯 JS 的 React。
主要能力:涵盖 React 19 的破坏性变更与迁移模式,如 ref 作为普通 prop(forwardRef 已弃用)、useActionState 取代 useFormState、use() 解包 Promise 或 context;组件 props 通过 ComponentPropsWithoutRef 扩展原生元素,children 使用 ReactNode,变体 props 使用可辨识联合;事件处理器使用具体事件类型(MouseEvent、FormEvent、ChangeEvent、KeyboardEvent 等);hooks 类型化,包括 useState 对联合/空值的显式标注、useRef 区分 DOM 与可变值、useReducer 的可辨识联合 action、自定义 hooks 用 as const 返回元组、useContext 的空值守卫;泛型组件通过 keyof T 与 render props 推断类型;Server Components 支持异步数据获取与 'use server' Server Actions;TanStack Router 提供类型安全的路由、参数、搜索参数与 loader 数据,并可用 Zod 校验搜索参数。
使用方式:作为技能在构建 React TypeScript 代码时调用,遵循其 ALWAYS/NEVER 约定,例如始终使用具体事件类型、对联合/空值显式标注 useState、React 19 中用 ref 作为 prop、表单用 useActionState、TanStack Router 搜索参数用 Zod 校验;避免 any、JSX.Element、forwardRef、useFormState,并注意 DOM ref 的空值处理、不在同一文件混用 Server/Client 组件、传给 use() 的 Promise 不要 await。
限制:资料未提供安装命令、收费、价格、平台或效果信息;具体实现细节需参考其附带的 hooks.md、event-handlers.md、react-19-patterns.md、generic-components.md、server-components.md、tanstack-router.md 等文档。