Ionic项目中自定义Chart.js插件遇TypeScript类型匹配错误

环境信息 #

Ionic CLI                     : 7.0.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.0.5
   @angular-devkit/build-angular : 16.0.0
   @angular-devkit/schematics    : 16.0.0
   @angular/cli                  : 16.0.0
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.0.0
   @capacitor/android : 5.0.0
   @capacitor/core    : 5.0.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v18.13.0 (/usr/bin/node)
   npm    : 9.2.0
   OS     : Linux 6.2

已安装依赖：

• chart.js@4.3.0
• ng2-charts@4.1.1

问题描述 #

自定义Chart.js插件并注册后，在图表配置的plugins选项中配置自定义插件参数时，TypeScript报错，提示无法识别自定义插件的配置项。

代码示例 #

TS文件（home.page.ts） #

import { Component } from '@angular/core';
import { Chart, ChartConfiguration } from 'chart.js';

const myPlugin = {
  id: 'tstPlugin',  
  beforeDraw:((chart:Chart, args:any, plugins:any) => {
    const {ctx, chartArea:{top, bottom, left, right, width, height} } = chart;
    ctx.save();
    ctx.strokeStyle = plugins.color;
    ctx.strokeRect (left, top, width, height);
    ctx.restore();
  })
} 

Chart.register (myPlugin);

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor() {
  }  

  public RSChartCfg: ChartConfiguration = {
    type: "line",
    data: {
      labels: new Array(10).fill (""),
      datasets: [{
        data: new Array(10),
        label: "FaseRS"
      }]  
    },
    options:{
      responsive: true,
      elements:{
        point:{
          radius: 0
        }          
      },
      scales:{
        x:{
          ticks: {
            callback: function(value: any, index: any, values: any) {
              switch (index) {
                case 0: return '0ms';
                case 4: return '20ms';
                case 9: return '40ms';    
                default: return ''          
              }
            }
          }
        }
      },
      plugins:{
        tstPlugin:{
          color: 'blue'
        }        
      }
    }
  }

  ngOnInit() {    
    console.log('ngOnInit');       
  }

  ionViewWillEnter() {
    console.log('ionWilEnter');        
  }

  ionViewDidEnter() {
    console.log('ionViewDidEnter');   

    this.RSChartCfg.data.datasets[0].data = [ 65, 59, 80, 81, 56, 55, 40, 20, 32, 10 ];
    this.RSChartCfg = {...this.RSChartCfg  }    
}

HTML文件（home.page.html） #

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <canvas #RS baseChart
    [type]="RSChartCfg.type"
    [data]="RSChartCfg.data"  
    [options]="RSChartCfg.options">
  </canvas>  

</ion-content>

错误信息（翻译后） #

类型“{ tstPlugin: { color: string; }; }”不能分配给类型“_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>”。
对象字面量只能指定已知属性，而“tstPlugin”在类型“_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>”中不存在。

解决方案 #

问题根源是Chart.js的TypeScript类型定义中没有包含你自定义插件的配置项，需要手动扩展类型：

• 在项目的src目录下创建一个类型声明文件，比如chartjs-custom-plugin.d.ts
• 在文件中扩展Chart.js的插件选项类型：

  import { ChartType } from 'chart.js';
  
  declare module 'chart.js' {
    interface PluginOptionsByType<TType extends ChartType> {
      // 这里的key要和你自定义插件的id完全一致
      tstPlugin?: {
        color: string;
      };
    }
  }
  

• 同时，建议给自定义插件添加明确的类型，让TypeScript更好地识别：

  import { Plugin } from 'chart.js';
  
  const myPlugin: Plugin = {
    id: 'tstPlugin',  
    beforeDraw:(chart, args, pluginOptions) => {
      const {ctx, chartArea:{top, bottom, left, right, width, height} } = chart;
      ctx.save();
      // 这里pluginOptions会自动识别出color属性
      ctx.strokeStyle = pluginOptions.color;
      ctx.strokeRect(left, top, width, height);
      ctx.restore();
    }
  } 
  

这样修改后，TypeScript就能识别自定义插件的配置项，错误会消失。

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