D3 scaleLinear报Type 'undefined'无法赋值给NumberValue类型错误求助

问题原因 #

这是TypeScript静态类型检查导致的，和数据解析无关。

虽然你确认了返回的Candlestick数组没有undefined值，但D3的d3.extent类型定义默认考虑了极端情况：如果传入的数组是空数组，d3.extent会返回[undefined, undefined]。TypeScript的静态检查无法提前确认你的数组一定非空，因此会推断d3.extent的返回类型是[undefined, undefined] | [number, number]，而d3.scaleLinear().domain()要求传入不含undefined的可迭代数值类型，最终触发ts(2345)错误。

解决方法 #

方法1：类型断言 #

直接断言d3.extent的返回值是合法的数值数组：

const yAccessor = (d: Candlestick) => d.high ?? 0;
const yScale = d3.scaleLinear().domain(d3.extent(data, yAccessor) as [number, number]);

方法2：兜底空数组情况 #

手动处理数组为空的场景，自定义默认定义域范围：

const yAccessor = (d: Candlestick) => d.high ?? 0;
const [minY, maxY] = d3.extent(data, yAccessor) ?? [0, 100];
const yScale = d3.scaleLinear().domain([minY, maxY]);

方法3：标记数据为非空数组 #

如果能确保服务器返回的data一定是非空数组，给data添加非空类型断言：

// 假设fetchData是你的数据请求函数
const data = await fetchData() as Candlestick[];
const yAccessor = (d: Candlestick) => d.high ?? 0;
const yScale = d3.scaleLinear().domain(d3.extent(data, yAccessor));

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