用途:面向 JSON → TypeScript → React 的数据到界面转换流程,帮助开发者把静态数据组织成类型安全的组件结构,并统一颜色、图标、格式化与聚合逻辑。
主要能力:根据 JSON 结构建立基础 TypeScript 接口,并导出枚举联合类型、对可空字段使用可选属性;用 extends、Pick、Omit、& 构建派生类型与聚合接口。提供语义化颜色映射系统,用 Record<枚举, 颜色值> 定义 badge、bg、text、border、dot 多格式 Tailwind 类,并导出访问函数。提供图标映射,将枚举映射到 lucide-react 图标名并导出访问函数。提供格式化工具,如用 Intl.NumberFormat 处理美元金额、用 toLocaleDateString 处理日期,以及年份、百分比等计算辅助。提供分组与排序模式,包括按枚举分组、按优先级排序及汇总统计。
使用方式:按资料所述,先在读取 JSON 后建立接口与联合类型;再构建派生与聚合类型;接着定义颜色和图标映射及访问函数;最后补上格式化与聚合工具。类型校验可运行 tsc --noEmit,资料还提到可考虑用 Zod 做运行时校验、用 Storybook 做视觉测试。
适用场景:需要将 JSON 数据转为 React 组件、由 schema 生成 TypeScript 类型、构建派生类型,或统一语义颜色与格式化逻辑的项目。
限制与说明:该技能为模式与最佳实践集合,并非可直接安装运行的工具,资料未提供安装命令、收费、价格、平台或效果信息,暂未提供。