codebuddy支持四种props类型自动生成方式：一、自然语言描述触发语义推导；二、从现有jsx反向提取；三、对接figma设计稿映射字段；四、cli批量处理，覆盖开发全场景。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在开发React组件时需要快速生成准确的Props类型定义，但手动编写TypeScript接口耗时且易出错，则可能是由于缺乏结构化输入引导与AI语义理解协同机制。以下是实现Props类型定义自动生成的具体操作路径：
一、使用自然语言描述触发类型推导
CodeBuddy通过语义解析将开发者对组件行为与数据结构的自然语言描述，映射为符合TypeScript规范的Props接口定义，避免手动推断字段名、类型及可选性。
1、在CodeBuddy支持的IDE插件（如VS Code或JetBrains系列）中打开React项目文件。
2、新建一个.tsx文件，在文件顶部空白处输入自然语言指令，例如：“创建一个用户头像组件，接收src（字符串，必填）、alt（字符串，可选）、size（数字，默认48）、onClick（函数，可选）”。
3、光标置于该行末尾，调用CodeBuddy快捷键（默认Ctrl+Enter）或点击侧边栏“生成Props”按钮。
4、AI自动输出完整接口定义，形如：interface AvatarProps { src: string; alt?: string; size?: number; onClick?: () => void; }。
二、基于现有JSX结构反向提取Props类型
当已有未类型化的React组件代码时，CodeBuddy可扫描JSX中使用的props属性及其使用方式（如{props.src}、props.onClick?.()），结合上下文推断类型约束并生成对应接口。
1、确保当前编辑的.tsx文件中已存在函数组件骨架，且内部JSX明确引用了props对象属性。
2、选中整个组件函数体（从const ComponentName = (props) => {开始至结尾大括号）。
3、右键选择“CodeBuddy → 从JSX推导Props类型”，或执行命令面板指令CodeBuddy: Infer Props from JSX。
4、系统将在组件上方插入自动生成的interface声明，并将函数参数类型标注为该接口。
三、接入Figma设计稿自动映射字段类型
当组件开发源自Figma原型图时，CodeBuddy可通过解析图层命名、交互标注与数据绑定说明，将视觉元素背后的业务字段直接转化为Props类型字段，实现设计-代码字段一致性。
1、在CodeBuddy管控台完成Figma API密钥绑定，并授权访问目标设计文件。
2、上传或选择已标注“数据字段”的Frame，例如名为“UserCard”的图层内包含文本图层“{{user.name}}”和图标图层“{{user.avatarUrl}}”。
3、点击“生成React组件”，勾选“同步生成Props类型”选项。
4、输出代码中将包含：interface UserCardProps { user: { name: string; avatarUrl: string }; }。
四、通过CLI命令批量处理多组件Props定义
针对中大型项目中大量无类型组件需统一补全的场景，CodeBuddy CLI提供批量化、可脚本化的Props接口生成能力，支持按目录扫描与规则过滤。
1、在项目根目录终端执行：npx codebuddy-cli props:generate --src ./src/components/**/index.tsx --strict。
2、CLI自动识别所有导出的函数组件，分析其JSX中props使用模式，并为每个组件生成独立.d.ts类型声明文件。
3、若某组件中出现{props.items?.map(...)}，CLI将推断items?: Array<any></any>；若检测到props.isActive === true，则标记isActive?: boolean。
4、运行完成后，所有组件的Props类型即被注入对应TSX文件顶部或关联声明文件中。
