reactjs - چگونه از گزینهها در افزونه سفارشی Chart js v3 استفاده کنیم

من دستورالعملهای مستندات رسمی را برای ایجاد یک افزونه سفارشی دنبال میکنم.

من از تایپاسکریپت و ریاکت استفاده میکنم.

در حال حاضر، من با یک پلاگین آزمایشی که پیامی را در کنسول ثبت میکند، امتحان میکنم. وقتی پلاگین را مستقیماً در نمودار تعریف میکنم (به صورت درون خطی) به درستی کار میکند. اما، وقتی سعی میکنم گزینههای پلاگین را در گزینهها وارد کنم، یک خطای تایپاسکریپت نمایش داده میشود.

پیام خطا به شرح زیر است:

Type '{ pluginPlugin: {}; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<"line">>'.
  Object literal may only specify known properties, and 'pluginPlugin' does not exist in type '_DeepPartialObject<PluginOptionsByType<"line">>'

من فکر میکنم تمام مشکلم با تایپاسکریپت است، چون اگر به سادگی خطای ts را نادیده بگیرم، میتوانم ببینم پلاگین به درستی کار میکند.

کد افزونه نمونه به شرح زیر است

const dummyPlugin = {
    id: 'pluginPlugin',
    afterDraw: function() {
        console.log("afterDraw");
    }
}

یک بخش از کد نمودار که در آن پلاگین را بهصورت داخلی استفاده میکنم به شرح زیر است:

const myChart = new Chart(node, {
                type: 'line',
                data: {datasets: [], labels: []},
                plugins: [dummyPlugin],
                options: {}
});

در این حالت، پلاگین به درستی ثبت میکند.

با این حال، وقتی سعی میکنم چند گزینه برای افزونه اضافه کنم، خطای ذکر شده در بالا ظاهر میشود.

const myChart = new Chart(node, {
                type: 'line',
                data: {datasets: [], labels: []},
                plugins: [dummyPlugin],
                options: {
                    plugins: {
                        pluginPlugin: {}
                    }
                }
});

پاسخ شماره ۱

پاسخی برای این را میتوان در بخش نمودارهای جدید مستندات یافت، شما نیاز خواهید داشت گزینههایی که chart.js ارائه میدهد را گسترش دهید.

برای انجام این کار، شما نیاز دارید که یک فایل index.d.ts به پروژه خود اضافه کنید که در آن میتوانید موارد زیر را اضافه کنید:

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

declare module 'chart.js' {
  interface PluginOptionsByType<TType extends ChartType> {
    pluginPlugin?: { // Key is the pluginId
      customOption1?: boolean;
    }; 
  }
}

ویرایش:

مستندات بهروزشده با مثال مشخص دربارهٔ نحوه اضافه کردن تایپها به یک افزونهٔ سفارشی: https://www.chartjs.org/docs/master/developers/plugins.html#typescript-typings

پاسخ شماره ۲

اگر از React یا Vue استفاده میکنید و یک پلاگین سفارشی اضافه کردهاید. میتوانید از این نوع ChartOptions گسترش یافته استفاده کنید.

import { ChartOptions } from "chart.js";

type ExtendedPlugins = ChartOptions["plugins"] & {
  MyCustomPlugin?: {
    myCustomValue: number;
  };
};

interface ExtendedChartOptions extends ChartOptions {
  plugins: ExtendedPlugins;
}