':' expected.ts(1005) 如何修复

Question

看到许多问题尝试过的建议，到目前为止没有运气。现在 使用 vsc 版本 1.76.2，节点 16.14.2 ts 版本 4.6.4 来自 ng 版本命令

barChartData 是

  public barChartData: ChartData<'bar'> = {
    labels: [],
    datasets: [
      {
        data: [],
        // data: [65, 59, 80, 81, 56, 55, 40],
        // backgroundColor: ['#012169', '#0073cf', '#646464', '#012169', '#0073cf', '#646464', '#012169'],
        // hoverBackgroundColor: ['#8090b4', '#80b9e7', '#919191', '#8090b4', '#80b9e7', '#919191', '#8090b4'],
      },
    ]
  };

它是 Chart.js v 3.9.1 的一部分，标签可以是未定义的

在 vsc 中弹出窗口显示

(property) ChartData<"bar", number[], unknown>.labels?: unknown[] | undefined

事件处理程序是错误发生的地方：

  public chartClicked(e: any): void {
    this.barChartData.labels?[0];

    console.log(e);
  }

我得到一个错误

':' expected.ts(1005)

当尝试从 ng serve 构建时

./src/app/components/test03/test03.component.ts:127:69 - Error: Module parse failed: Unexpected token (127:69)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|     }
|     chartClicked(e) {
>         console.log(this.barChartData.labels ? [e.active[0].index] : );
|         console.log(e);
|     }

Error: src/app/components/test03/test03.component.ts:135:61 - error TS1005: ':' expected.

135     console.log(this.barChartData.labels?[e.active[0].index]);
                                                                ~




× Failed to compile.

如何解决这个问题？

Answer 1

要使用带括号的可选链接运算符，您仍然需要在问号后添加一个点：

this.barChartData.labels?.[0];

MDN 参考

Answer 2

?.

是你可能想要使用的（称为 optional chaining [MDN]）。你错过了

.

错误的原因是因为

?

在js（以及打字稿）中是一个条件（三元）运算符[MDN]。它期望

:

因为这是三元运算符的语法。

let checkMe = true;
console.log(checkMe ? "truthyCase" : "falsyCase");
// outputs "truthyCase"

?

问号在您的代码中，如错误所示：

Error: src/app/components/test03/test03.component.ts:135:61 - error TS1005: ':' expected.
                                            v
135     console.log(this.barChartData.labels?[e.active[0].index]);
                                            ^                   ~

并且因为您只放置了

?

而不是

?.

，它会将其解释为三元运算符而不是可选的链接运算符。

Answer 3

您需要一个

.

才能使用可选的数组链接。 将

this.barChartData.labels?[0];

更改为

this.barChartData.labels?.[0];