自定义注册的 Chart.js 插件不可分配给类型“_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>”

Question

我陷入了一个使用空白模板从头开始的离子项目，然后添加我的代码。这是我的离子信息：

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）。我对 Ionic 和 TypeScript 几乎是新手，我一直在从教程中学习，但两天来，我无法继续尝试注册自定义插件，因为它无法识别它。这是我的代码：

.ts 文件：

import { Component } from '@angular/core';
import { Chart, ChartOptions, ChartConfiguration } from 'chart.js'; } 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 文件：

<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>

这是错误：

Type '{ myPlugin: { color: string; }; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'. [ng] Object literal may only specify known properties, and 'myPlugin' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.

Answer 1

好的，找到了...

我忘记阅读这部分：https://www.chartjs.org/docs/latest/developers/plugins.html#typescript-typings

如果您希望插件是静态类型的，则必须提供 .d.ts TypeScript 声明文件。Chart.js 通过使用“声明合并”的概念，提供了一种用用户定义的类型来增强内置类型的方法。添加插件时，PluginOptionsByType 必须包含插件的声明。

添加了 d.ts 文件：

import {ChartType, Plugin} from 'chart.js';

declare module 'chart.js' {
  interface PluginOptionsByType<TType extends ChartType = ChartType> {
    tstPlugin?: {
      color?: string
    }
  }
}

问题解决了......我正要删除这篇文章，但我留下了它，因为也许它对像我这样正在迈出第一步的人有用