Recharts 怎么用 createHorizontalChart 等图表助手让 dataKey 获得类型检查【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts在 TypeScript 项目里用 Recharts 写图表时组件默认的 data 和 dataKey 都会退化成any——dataKeynme这类拼写错误或者给错字段TypeScript 不会给出任何提示。从 Recharts 3.8 开始官方提供了createHorizontalChart、createVerticalChart、createRadialChart、createCentricChart四个图表助手chart helpers用你的数据类型定义一次助手返回的图表、坐标轴和图形组件就都会强制匹配数据结构dataKey拼错或字段类型不对会在编译期报错。Recharts 的类型定义直接打包在 npm 主包里不需要额外安装types之类的包。先看默认行为为什么 dataKey 不受检查这是官方 TypeScript 指南的第一步示例来自 TypeScript 指南import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from recharts; const data [ { name: Page A, uv: 4000, pv: 2400, amt: 2400 }, // ... ]; export default function Example() { return ( AreaChart width{500} height{400} data{data} CartesianGrid / XAxis dataKeyname / YAxis / Tooltip / Area typemonotone dataKeyuv / /AreaChart ); }在这种默认用法下dataKey接受任意字符串写错也拿不到类型提示。替代路径逐组件用泛型标注同从 3.8 起也可以给单个组件显式传泛型例如XAxisMyData, string、AreaMyData, number这同样能让dataKey受检查IDE 会基于数据结构自动补全 dataKey。但官方 JSDoc 里说明逐个组件标注「works per-component, it becomes tedious and error-prone across an entire chart」逐组件可行但整图铺开时繁琐且容易出错所以整图统一检查时推荐用图表助手。主路径用 createHorizontalChart 建立整图类型检查以下代码完整来自 Step3 示例可直接执行// 1. Import the components you would like to use in your chart from Recharts as usual import { Area, CartesianGrid, createHorizontalChart, Tooltip, XAxis, YAxis } from recharts; // 2. Define your data type type MyData { name: string; uv: number; pv: number; amt: number; }; // 3. Pass in the required data and axis types to the helper (TData, TCategorical, TNumerical). Unbundle what you need into specifically-typed wrapper components // Chart wrappers are included for all Cartesian charts (AreaChart, BarChart, ComposedChart, LineChart, ScatterChart) by default. const Typed createHorizontalChartMyData, string, number()({ // XAxis is strongly-typed to expect a string dataKey from MyData (e.g. name) XAxis, // YAxis is strongly-typed to expect a number dataKey from MyData (e.g. uv, pv, amt) YAxis, // Area is strongly-typed to expect a number dataKey from MyData Area, // Typed.AreaChart is included automatically. AreaChart is strongly-typed to CartesianChartPropsMyData and enforces layouthorizontal }); const data: MyData[] [ { name: Page A, uv: 4000, pv: 2400, amt: 2400 }, { name: Page B, uv: 3000, pv: 1398, amt: 2210 }, { name: Page C, uv: 2000, pv: 9800, amt: 2290 }, { name: Page D, uv: 2780, pv: 3908, amt: 2000 }, { name: Page E, uv: 1890, pv: 4800, amt: 2181 }, { name: Page F, uv: 2390, pv: 3800, amt: 2500 }, { name: Page G, uv: 3490, pv: 4300, amt: 2100 }, ]; export default function Example() { // 4. Use the typed components in place of the original Recharts components. TypeScript will enforce correct prop types based on your data type! return ( Typed.AreaChart // layout prop is omitted here since its already enforced by the chart wrapper width{500} height{400} data{data} margin{{ top: 10, right: 30, left: 0, bottom: 0, }} CartesianGrid / Typed.XAxis dataKeyname / Typed.YAxis / Tooltip / {/* dataKey is automatically restricted to numbers on MyData without redeclaring! */} Typed.Area typemonotone dataKeyuv / /Typed.AreaChart ); }按步骤理解这个流程从recharts主包导入——createHorizontalChart与图表组件一样从主包导出见 src/index.ts无需别的来源。定义数据类型MyData这是后面所有检查的基准。调用助手并传三个泛型(TData, TCategorical, TNumerical)即数据类型、分类轴字段类型、数值轴字段类型。水平图表中 X 轴是分类轴、Y 轴是数值轴所以传string, number。然后把要类型化的组件XAxis、YAxis、Area等放进第二个括号的对象里。用返回的Typed.Xxx替换原始组件Typed.XAxis只接受MyData中string类型字段的dataKeyTyped.Area只接受number类型字段。示例里的CartesianGrid、Tooltip没有放入助手保持原样使用。注意助手是柯里化调用先createHorizontalChartTData, TCategorical, TNumerical()再传组件对象。助手替你做了什么根据 createCartesianCharts.tsx 中的实现与 JSDoc默认包含五个 Cartesian 图表包装AreaChart、BarChart、LineChart、ComposedChart、ScatterChart不需要放进组件对象就会出现在返回值里。静态绑定layouthorizontal生成的图表包装从属性中剥离了layout防止误改图表方向所以示例中不需要再写layout。编译期拒绝纯垂直组件Funnel、FunnelChart不能传入createHorizontalChart的组件对象传了会触发 TS 错误。其余三个助手的区别四个助手签名相同都是createXxxChartTData, TCategorical string, TNumerical number()实现见 createPolarCharts.tsx助手默认返回的图表包装绑定的 layout编译期拒绝的组件createHorizontalChartAreaChart, BarChart, LineChart, ComposedChart, ScatterCharthorizontalFunnel、FunnelChartcreateVerticalChart同上另加 FunnelChartvertical无原生支持 Funnel、FunnelChartcreateRadialChartRadialBarChart、PieChartradialRadar、RadarChart 等 centric 专属组件createCentricChartRadarChartcentricPie、RadialBar 等 radial 专属组件垂直图表的分类/数值轴方向与水平相反泛型顺序要对应调整createVerticalChart的 JSDoc 示例是createVerticalChartMyData, number, string()X 轴为 number、Y 轴为 string。如何确认类型检查生效指南和源码 JSDoc 给出的验证方式都发生在编译期 / IDE 中没有额外的运行时命令在Typed.Area上把dataKey改成MyData上不存在的字段或string类型字段例如dataKeynameTypeScript 会报错——这正是助手「catchingdataKeytypos and shape errors early」的设计目标。把dataKey写成合法字段时IDE 会基于数据形状自动补全候选值指南原文「your IDE should also autocomplete your dataKeys based on your data shape」。尝试把Pie或RadialBar传进createCentricChart的组件对象会明确触发 TS 错误JSDoc 原文「PassingPieorRadialBarinto the components map will explicitly trigger a TS error」。运行时行为上包装组件就是对原始图表的透传并固定layout所以换成Typed.*后渲染结果与原组件一致变化只发生在类型层面。限制与适用条件图表助手要求Recharts 3.8四个助手均标注since 3.8指南中也写明「This feature is available since Recharts version 3.8」。包装组件不可再传layout——它被静态绑定且从属性中剥离这是设计上的防误改机制不是遗漏。createHorizontalChart的返回值不含Funnel/FunnelChart需要漏斗图时改用createVerticalChart。只有放进助手组件对象的组件才会被类型化未放入的组件如示例中的Tooltip、CartesianGrid仍按默认any处理。【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Recharts 怎么用 createHorizontalChart 等图表助手让 dataKey 获得类型检查？
Recharts 怎么用 createHorizontalChart 等图表助手让 dataKey 获得类型检查【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts在 TypeScript 项目里用 Recharts 写图表时组件默认的 data 和 dataKey 都会退化成any——dataKeynme这类拼写错误或者给错字段TypeScript 不会给出任何提示。从 Recharts 3.8 开始官方提供了createHorizontalChart、createVerticalChart、createRadialChart、createCentricChart四个图表助手chart helpers用你的数据类型定义一次助手返回的图表、坐标轴和图形组件就都会强制匹配数据结构dataKey拼错或字段类型不对会在编译期报错。Recharts 的类型定义直接打包在 npm 主包里不需要额外安装types之类的包。先看默认行为为什么 dataKey 不受检查这是官方 TypeScript 指南的第一步示例来自 TypeScript 指南import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from recharts; const data [ { name: Page A, uv: 4000, pv: 2400, amt: 2400 }, // ... ]; export default function Example() { return ( AreaChart width{500} height{400} data{data} CartesianGrid / XAxis dataKeyname / YAxis / Tooltip / Area typemonotone dataKeyuv / /AreaChart ); }在这种默认用法下dataKey接受任意字符串写错也拿不到类型提示。替代路径逐组件用泛型标注同从 3.8 起也可以给单个组件显式传泛型例如XAxisMyData, string、AreaMyData, number这同样能让dataKey受检查IDE 会基于数据结构自动补全 dataKey。但官方 JSDoc 里说明逐个组件标注「works per-component, it becomes tedious and error-prone across an entire chart」逐组件可行但整图铺开时繁琐且容易出错所以整图统一检查时推荐用图表助手。主路径用 createHorizontalChart 建立整图类型检查以下代码完整来自 Step3 示例可直接执行// 1. Import the components you would like to use in your chart from Recharts as usual import { Area, CartesianGrid, createHorizontalChart, Tooltip, XAxis, YAxis } from recharts; // 2. Define your data type type MyData { name: string; uv: number; pv: number; amt: number; }; // 3. Pass in the required data and axis types to the helper (TData, TCategorical, TNumerical). Unbundle what you need into specifically-typed wrapper components // Chart wrappers are included for all Cartesian charts (AreaChart, BarChart, ComposedChart, LineChart, ScatterChart) by default. const Typed createHorizontalChartMyData, string, number()({ // XAxis is strongly-typed to expect a string dataKey from MyData (e.g. name) XAxis, // YAxis is strongly-typed to expect a number dataKey from MyData (e.g. uv, pv, amt) YAxis, // Area is strongly-typed to expect a number dataKey from MyData Area, // Typed.AreaChart is included automatically. AreaChart is strongly-typed to CartesianChartPropsMyData and enforces layouthorizontal }); const data: MyData[] [ { name: Page A, uv: 4000, pv: 2400, amt: 2400 }, { name: Page B, uv: 3000, pv: 1398, amt: 2210 }, { name: Page C, uv: 2000, pv: 9800, amt: 2290 }, { name: Page D, uv: 2780, pv: 3908, amt: 2000 }, { name: Page E, uv: 1890, pv: 4800, amt: 2181 }, { name: Page F, uv: 2390, pv: 3800, amt: 2500 }, { name: Page G, uv: 3490, pv: 4300, amt: 2100 }, ]; export default function Example() { // 4. Use the typed components in place of the original Recharts components. TypeScript will enforce correct prop types based on your data type! return ( Typed.AreaChart // layout prop is omitted here since its already enforced by the chart wrapper width{500} height{400} data{data} margin{{ top: 10, right: 30, left: 0, bottom: 0, }} CartesianGrid / Typed.XAxis dataKeyname / Typed.YAxis / Tooltip / {/* dataKey is automatically restricted to numbers on MyData without redeclaring! */} Typed.Area typemonotone dataKeyuv / /Typed.AreaChart ); }按步骤理解这个流程从recharts主包导入——createHorizontalChart与图表组件一样从主包导出见 src/index.ts无需别的来源。定义数据类型MyData这是后面所有检查的基准。调用助手并传三个泛型(TData, TCategorical, TNumerical)即数据类型、分类轴字段类型、数值轴字段类型。水平图表中 X 轴是分类轴、Y 轴是数值轴所以传string, number。然后把要类型化的组件XAxis、YAxis、Area等放进第二个括号的对象里。用返回的Typed.Xxx替换原始组件Typed.XAxis只接受MyData中string类型字段的dataKeyTyped.Area只接受number类型字段。示例里的CartesianGrid、Tooltip没有放入助手保持原样使用。注意助手是柯里化调用先createHorizontalChartTData, TCategorical, TNumerical()再传组件对象。助手替你做了什么根据 createCartesianCharts.tsx 中的实现与 JSDoc默认包含五个 Cartesian 图表包装AreaChart、BarChart、LineChart、ComposedChart、ScatterChart不需要放进组件对象就会出现在返回值里。静态绑定layouthorizontal生成的图表包装从属性中剥离了layout防止误改图表方向所以示例中不需要再写layout。编译期拒绝纯垂直组件Funnel、FunnelChart不能传入createHorizontalChart的组件对象传了会触发 TS 错误。其余三个助手的区别四个助手签名相同都是createXxxChartTData, TCategorical string, TNumerical number()实现见 createPolarCharts.tsx助手默认返回的图表包装绑定的 layout编译期拒绝的组件createHorizontalChartAreaChart, BarChart, LineChart, ComposedChart, ScatterCharthorizontalFunnel、FunnelChartcreateVerticalChart同上另加 FunnelChartvertical无原生支持 Funnel、FunnelChartcreateRadialChartRadialBarChart、PieChartradialRadar、RadarChart 等 centric 专属组件createCentricChartRadarChartcentricPie、RadialBar 等 radial 专属组件垂直图表的分类/数值轴方向与水平相反泛型顺序要对应调整createVerticalChart的 JSDoc 示例是createVerticalChartMyData, number, string()X 轴为 number、Y 轴为 string。如何确认类型检查生效指南和源码 JSDoc 给出的验证方式都发生在编译期 / IDE 中没有额外的运行时命令在Typed.Area上把dataKey改成MyData上不存在的字段或string类型字段例如dataKeynameTypeScript 会报错——这正是助手「catchingdataKeytypos and shape errors early」的设计目标。把dataKey写成合法字段时IDE 会基于数据形状自动补全候选值指南原文「your IDE should also autocomplete your dataKeys based on your data shape」。尝试把Pie或RadialBar传进createCentricChart的组件对象会明确触发 TS 错误JSDoc 原文「PassingPieorRadialBarinto the components map will explicitly trigger a TS error」。运行时行为上包装组件就是对原始图表的透传并固定layout所以换成Typed.*后渲染结果与原组件一致变化只发生在类型层面。限制与适用条件图表助手要求Recharts 3.8四个助手均标注since 3.8指南中也写明「This feature is available since Recharts version 3.8」。包装组件不可再传layout——它被静态绑定且从属性中剥离这是设计上的防误改机制不是遗漏。createHorizontalChart的返回值不含Funnel/FunnelChart需要漏斗图时改用createVerticalChart。只有放进助手组件对象的组件才会被类型化未放入的组件如示例中的Tooltip、CartesianGrid仍按默认any处理。【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考