用途:该技能面向 React 与 TypeScript 的集成开发,帮助开发者为组件、事件、Hooks 与 Context 编写正确的类型定义,提升类型安全与复用性。
主要能力:
- 组件 props 类型:使用 interface 或 type 定义 props,处理可选属性、联合类型与 children(ReactNode、PropsWithChildren、render prop children)。
- 扩展 HTML 元素属性:通过 extends ButtonHTMLAttributes、InputHTMLAttributes 等复用原生元素属性,并结合 forwardRef 转发 ref。
- 多态组件:利用 ElementType 与 ComponentPropsWithoutRef 实现 as 属性切换渲染元素。
- 事件处理器类型:常用类型包括 ChangeEvent、FormEvent、MouseEvent、KeyboardEvent、FocusEvent、DragEvent,并演示泛型事件回调。
- Hooks 类型:useState、useReducer、useRef、useContext 及自定义 Hook 的泛型标注方式,包括可辨识联合表示状态机。
- 泛型组件与工具类型:List<T>、Select<T>、Table<T>,以及 Partial、Pick、Omit、Record、Extract、Exclude、ComponentProps 等;更完整的泛型、类型工具与类型安全 Context 工厂(createSafeContext)内容位于 references/generics-utilities-context.md,需要时再加载。
使用方式:作为技能参考在需要为 React + TypeScript 代码补全类型时查阅;涉及 React 基础语法可参考 react-fundamentals-19。文档中的命令与代码保持原样,不提供安装命令之外的额外信息。
适用场景:为组件库、表单、数据展示组件、自定义 Hook 与 Context 建立类型;在泛型复用与多态渲染需求下查找模式。
限制:资料未提供该技能的安装方式、运行环境要求、收费与价格、适用平台或性能效果。仅覆盖文档列出的类型模式,未涉及项目配置、构建工具或测试相关内容,这些暂未提供。