用途:在 TypeScript 中为 React 组件与 Hooks 编写类型,适用于标注 props、hooks、事件处理器或组件泛型时使用。优先级 P1(HIGH)。
主要能力与实施指引:组件优先用 interface/type 定义 Props,而非 React.FC(后者隐含 children);返回类型使用 JSX.Element 或 ReactNode。需接收 children 的组件使用 PropsWithChildren<T>,或显式标注为 React.ReactNode。事件处理器始终使用具体的 React 事件类型,如 React.ChangeEvent<HTMLInputElement> 或 React.FormEvent<HTMLFormElement>。useRef 避免 any,使用 useRef<HTMLDivElement>(null);useState 复杂类型使用泛型,如 useState<User | null>(null)。原生元素可用 ComponentPropsWithoutRef<'button'> 或 ComponentPropsWithRef 安全扩展原生属性。可复用 UI(如列表)实现泛型组件,写法形如 <T,>(props: ListProps<T>)。互斥 props(如成功与错误状态)使用可辨识联合。利用 Omit、Pick、Partial 等工具类型转换 props 接口,避免冗余。
反模式:不用 any,改用 unknown;不用 React.FC;不用 Function,改用 (args: T) => void。
使用方式:当上述场景适用时,回答中保留相关领域术语或等价具体示例(如 generic)。参考资料见 references/example.md,包含类型化 props、泛型组件与 hook ref 模式。
限制:资料未提供安装命令、运行环境要求、收费或价格信息。