2

在尝试向折线图添加渐变时，我需要将其作为画布。在继续画布之前，我添加了一个类型检查，但是 Vetur 说“对象可能是 'null'.Vetur(2531)”

  mounted() {
    const canv = document.getElementById("line-chart") as HTMLCanvasElement;
    if (canv !== null && canv !== undefined) {
      const gradient = canv
        .getContext("2d")
        .createLinearGradient(0, 0, 0, canv.height);

经过研究，我尝试使用可选的链接运算符进行类型检查。这种方法有效，因为没有报告错误。

  mounted() {
    const canv = document.getElementById("line-chart") as HTMLCanvasElement;
    const gradient = canv
      ?.getContext("2d")
      ?.createLinearGradient(0, 0, 0, canv.height);

我对为什么第一种方法不起作用感到困惑，因为 canv 是一个常量，因此不能改变。类型检查应该足够了。

为什么在这种情况下只有可选链接起作用？

4

1 回答 1

1

问题不在于canv. 编译器知道它canv本身不是null，但如果您查看 的返回类型canv.getContext("2d")，那可能是null：

HTMLCanvasElement.getContext(
  contextId: "2d", 
  options?: CanvasRenderingContext2DSettings | undefined
): CanvasRenderingContext2D | null

这就是“对象可能为空”错误所抱怨的。您可以在该调用之后使用可选链接来解决此问题，例如：

if (canv !== null && canv !== undefined) {
    const gradient = canv.getContext("2d")?.createLinearGradient(0, 0, 0, canv.height)
}

或者您可以进行更详细的类型检查：

if (canv !== null && canv !== undefined) {
    const context = canv.getContext("2d");
    if (context) {
        const gradient = context.createLinearGradient(0, 0, 0, canv.height)
    }
}

或任何其他说服编译器canv.getContext("2d")不会null：

if (canv !== null && canv !== undefined) {
    const gradient = (canv.getContext("2d") || { createLinearGradient: () => undefined })
        .createLinearGradient(0, 0, 0, canv.height);
}

Playground 代码链接

于 2020-11-20T22:10:16.730 回答