Canvas创建折线遇‘Object is possibly undefined’错误求助

原问题根源 #

你遇到的Object is possibly undefined错误，核心原因是TypeScript对Chart.js数据集类型的严格校验：

• Chart.js的ChartDataset类型中，borderColor既可以是单个颜色值（字符串/渐变/图案），也可以是颜色数组，TypeScript无法确定它一定是数组类型，所以dataset?.borderColor[index]的写法存在两种风险：
  1. 如果borderColor是单个值，用[index]访问会取字符串的索引字符（非预期行为）；
  2. 即使borderColor是数组，TypeScript也无法保证索引index不会越界，或者borderColor本身不为undefined。
• 之前的if判断或非空断言无效，大概率是因为只判断了dataset或borderColor的存在，没处理borderColor不是数组的情况，TypeScript依然会识别到潜在的类型风险。

调整后代码的合理性 #

你调整后的代码是合理的，而且比原写法更严谨：

1. 通过datapoint.options.borderColor获取颜色：Chart.js会自动把数据集的样式（包括borderColor）映射到单个数据点上，不管原数据集的borderColor是单个值还是数组，每个数据点的options.borderColor都会返回对应该点的正确颜色值，避免了数组索引访问的问题。
2. 类型断言的必要性：由于TypeScript对datapoint.options.borderColor的类型推断不够精确，用as string | CanvasGradient | CanvasPattern断言可以明确类型，消除类型错误。
3. ctx.save()和ctx.restore()的使用：这是Canvas绘制的最佳实践，能保证你修改的fillStyle不会影响后续的Canvas绘制操作，避免样式污染。

可优化点 #

可以增加空值判断，进一步避免潜在的错误：

const borderColor = datapoint.options.borderColor as string | CanvasGradient | CanvasPattern;
if (borderColor) {
  ctx.fillStyle = borderColor;
  ctx.fillRect(x, y, 10, 10);
}

内容的提问来源于stack exchange，提问作者Furkan Öz Türk