React TypeScript读取本地JSON导入Highcharts相关类型报错求助

报错原因梳理 #

两个报错都来自TypeScript类型校验不匹配：

1. 第一个Property 'value' does not exist报错：你读取的JSON数据没有提前定义类型，TypeScript无法识别JSON条目上存在value字段。
2. 第二个Type 'string' is not assignable to type 'number'报错：你使用模板字符串${i.test}把值强制转为了字符串，和Iinterface中定义的test字段为number类型冲突，同时接口返回/JSON中的test字段本身可能是字符串类型的数字，没有做类型转换。

修复步骤 #

步骤1：给所有外部数据源定义明确类型 #

首先根据你本地JSON、接口返回的实际字段结构，定义对应类型：

// 本地JSON每条数据的结构，按你JSON实际字段补全
interface JsonItem {
  value: number;
  test: string | number;
  // 其他JSON中存在的字段都在这里声明
}

// 你自定义的图表数据接口
interface Iinterface {
  test: number;
}

步骤2：修复第一个字段不存在的报错 #

给读取到的JSON数据声明对应类型，TypeScript就能识别value字段：

// 导入JSON后先声明类型，如果你是fetch读取的JSON，也做同样的类型声明
import rawTest from './test.json';
const test: JsonItem[] = rawTest;

const dataMap = test.map(r => ({ 
  y: r.value 
}));

步骤3：修复类型不匹配的报错 #

不要使用模板字符串处理数字类型字段，改为用Number()把值转为数字类型，同时优化数组遍历逻辑：

.then(response => {
  // 给接口返回数据声明类型
  const resData = response.data as JsonItem[];
  // 直接用map返回新数组，不需要额外声明空数组push
  const data: Iinterface[] = resData.map(i => ({
    // 把test字段转为数字，和接口定义的number类型匹配
    test: Number(i.test)
  }));
  setChartData(data);
});

注意事项 #

• 所有外部数据源（本地JSON、后端接口返回）都要提前显式声明类型，不要依赖TypeScript自动推断，也不要随意用any绕过校验。
• Highcharts要求数据项的数值类属性必须是number类型，传递字符串会同时触发类型报错和图表渲染异常。
• 如果字段值可能为空，可以先加判空逻辑再做类型转换，避免转成NaN影响图表渲染。

内容的提问来源于stack exchange，提问作者Roni