如何在Angular项目中为Chart.js添加正确的TypeScript类型定义

第一步：修正依赖问题 #

Chart.js v3 及以上版本已经内置完整的TypeScript类型定义，无需额外安装社区类型包。你当前安装的@types/chart.js@^2.9.37是适配v2版本的，会和v3内置类型产生冲突，先执行命令卸载：

npm uninstall @types/chart.js

第二步：修正组件类型定义 #

你原有代码存在两个类型问题：一是@Input() chart标记为any，二是createChartConfig方法写死了line图表泛型，无法适配bar等其他图表类型。修改后的组件代码如下：

import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
import Chart, { ChartConfiguration, ChartType } from 'chart.js/auto';

@Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements AfterViewInit {
    @ViewChild('chart') chartEl!: ElementRef<HTMLCanvasElement>;
    @Input() chart!: ChartConfiguration<ChartType>;

    ngAfterViewInit(): void {
        new Chart(this.chartEl.nativeElement, this.createChartConfig(this.chart));
    }

    private createChartConfig(chart: ChartConfiguration<ChartType>): ChartConfiguration<ChartType> {
        return {
            type: chart.type,
            data: chart.data,
            options: chart.options,
        };
    }
}

说明：ChartType是Chart.js内置的所有图表类型联合类型，包含line/bar/radar/pie等所有官方支持的图表类型，可自动适配多类型图表场景。!非空断言用于标记ViewChild和@Input属性在生命周期执行时必然存在，符合Angular组件的执行逻辑。

第三步：修正业务数据集类型 #

将原有数据集的Array<any>替换为正式类型即可获得完整的类型校验和提示：

import { ChartConfiguration, ChartType } from 'chart.js/auto';

export const charts: Array<ChartConfiguration<ChartType>> = [
    {
        type: 'line',
        data: {
            labels: [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
            ],
            datasets: [
                {
                    label: 'My First dataset',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [0, 10, 5, 2, 20, 30, 45],
                },
                {
                    label: 'My Second dataset',
                    backgroundColor: 'rgb(123, 24, 201)',
                    borderColor: 'rgb(100, 99, 132)',
                    data: [5, 60, 15, 8, 20, 45, 45],
                }
            ]
        },
    },
    {
        type: 'bar',
        data: {
            labels: [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
            ],
            datasets: [
              {
                label: 'Dataset 1',
                data: [5, 60, 15, 8, 20, 45],
                backgroundColor: 'red',
              },
              {
                label: 'Dataset 2',
                data: [2, 30, 215, 18, 33, 90],
                backgroundColor: 'green'
              },
              {
                label: 'Dataset 3',
                data: [3, 0, 25, 23, 25, 95],
                backgroundColor: 'purple',
              },
            ]
        },
        options: {
            scales: {
              x: {
                stacked: true,
              },
              y: {
                stacked: true
              }
            }
        }
    },
]

如果后续需要对某类特定图表做专属配置校验，可以把泛型参数ChartType替换为对应图表的类型字面量，比如ChartConfiguration<'scatter'>，即可获得该类图表专属配置项的类型提示和校验。

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