Angular中TS1109与TS1005报错求助：Chart实例化代码异常

错误原因分析 #

1. TS1109: Expression expected：你的TypeScript版本低于3.7，不支持可选链操作符（?.），编译器无法识别该语法。
2. TS1005: ':' expected：由于可选链语法不被支持，编译器解析代码时出现逻辑混乱，误判了对象字面量的语法结构。

修复方案 #

方案1：升级TypeScript版本 #

将项目中的TypeScript升级到3.7及以上版本，即可直接支持可选链操作符。修改package.json里的typescript版本号，执行npm install或yarn install完成升级。

方案2：替换可选链语法（兼容低版本TS） #

如果暂时无法升级TS版本，改用空值检查替代可选链：

export class GraphViewComponent implements AfterViewInit {
    @ViewChild('lineCanvas', {static: false}) lineCanvas: ElementRef | undefined;
    lineChart: any;

    constructor() {}

    ngAfterViewInit(): void {
        this.lineChartMethod();
    }

    lineChartMethod() {        
        // 先确认元素存在，再获取nativeElement
        const canvasElement = this.lineCanvas ? this.lineCanvas.nativeElement : null;
        if (canvasElement) {
            this.lineChart = new Chart(canvasElement, {
                type: 'line',
                data: {
                    labels: [
                        'January',
                        // 补充剩余标签内容
                    ],
                    // 补充data的其他配置项
                },
                // 补充Chart的其他配置
            });
        }
    }
}

额外注意事项 #

• 确保@ViewChild获取的元素在ngAfterViewInit钩子中已完成初始化，此时调用lineChartMethod是正确时机。
• 确认已正确安装chart.js及对应的类型包@types/chart.js（如需类型支持）。

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