自定义插件 chartAreaBorder 不是正确的类型,但它可以正常工作。

huangapple go评论68阅读模式
英文:

Custom plugin chartAreaBorder is not the right type but it works

问题

这是我使用插件的方式。如何让 TypeScript 不再报错?

const options: ChartOptions<"line"> = {
  plugins: {
    chartAreaBorder: {
      borderColor: gridColor,
      borderWidth: 1,
    }
  }
  // ...其他选项...
}

这个插件实际上是有效的,但 TypeScript 报错如下:

Type '{ chartAreaBorder: { borderColor: string; borderWidth: number; borderDash: never[]; }; 
legend: { labels: { color: string; }; }; 
tooltip: { callbacks: { label: (this: TooltipModel<...>, toolTipItem: TooltipItem<"line">) 
=> string | undefined; }; }; }' 
is not assignable to type '_DeepPartialObject<PluginOptionsByType<"line">>'.

  Object literal may only specify known properties, and 'chartAreaBorder' does not exist
 in type '_DeepPartialObject<PluginOptionsByType<"line">>'.ts(2322)
index.d.ts(2804, 3): The expected type comes from property 'plugins' which is declared here on type
 '_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> 
& DatasetChartOptions<"line"> & ScaleChartOptions<...> & LineControllerChartOptions>'.

另外,我不知道如何为这个插件中的参数添加类型,所以我使用了 "any":

const chartAreaBorder = {
  id: "chartAreaBorder",
  beforeDraw(chart: any, args: any, options: any) {
    const {
      ctx,
      chartArea: { left, top, width, height },
    } = chart;
    ctx.save();
    ctx.strokeStyle = options.borderColor;
    ctx.lineWidth = options.borderWidth;
    ctx.setLineDash(options.borderDash || []);
    ctx.lineDashOffset = options.borderDashOffset;
    ctx.strokeRect(left, top, width, height);
    ctx.restore();
  },
};
英文:

This is how i am using the plugin. How to make typescript to shut up about this?

const options: ChartOptions&lt;&quot;line&quot;&gt; = {
plugins: {
      chartAreaBorder: {
        borderColor: gridColor,
        borderWidth: 1,
      }
  }
...other options..
}

This plugin actually works but typescript is saying:

Type &#39;{ chartAreaBorder: { borderColor: string; borderWidth: number; borderDash: never[]; }; 
legend: { labels: { color: string; }; }; 
tooltip: { callbacks: { label: (this: TooltipModel&lt;...&gt;, toolTipItem: TooltipItem&lt;&quot;line&quot;&gt;) 
=&gt; string | undefined; }; }; }&#39; 
is not assignable to type &#39;_DeepPartialObject&lt;PluginOptionsByType&lt;&quot;line&quot;&gt;&gt;&#39;.

  Object literal may only specify known properties, and &#39;chartAreaBorder&#39; does not exist
 in type &#39;_DeepPartialObject&lt;PluginOptionsByType&lt;&quot;line&quot;&gt;&gt;&#39;.ts(2322)
index.d.ts(2804, 3): The expected type comes from property &#39;plugins&#39; which is declared here on type
 &#39;_DeepPartialObject&lt;CoreChartOptions&lt;&quot;line&quot;&gt; &amp; ElementChartOptions&lt;&quot;line&quot;&gt; &amp; PluginChartOptions&lt;&quot;line&quot;&gt; 
&amp; DatasetChartOptions&lt;&quot;line&quot;&gt; &amp; ScaleChartOptions&lt;...&gt; &amp; LineControllerChartOptions&gt;&#39;

Also i didn't know how to type arguments in this plugin so i put any:

const chartAreaBorder = {
    id: &quot;chartAreaBorder&quot;,
    beforeDraw(chart: any, args: any, options: any) {
      const {
        ctx,
        chartArea: { left, top, width, height },
      } = chart;
      ctx.save();
      ctx.strokeStyle = options.borderColor;
      ctx.lineWidth = options.borderWidth;
      ctx.setLineDash(options.borderDash || []);
      ctx.lineDashOffset = options.borderDashOffset;
      ctx.strokeRect(left, top, width, height);
      ctx.restore();
    },
  };

答案1

得分: 1

你需要按照这里解释的方式扩展类型:https://www.chartjs.org/docs/4.2.0/developers/plugins.html#typescript-typings

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

declare module 'chart.js' {
  interface PluginOptionsByType<TType extends ChartType> {
    chartAreaBorder?: {
      borderColor?: string,
      borderWidth?: string
    }
  }
}
英文:

You need to extend the typing as explained here: https://www.chartjs.org/docs/4.2.0/developers/plugins.html#typescript-typings

import {ChartType, Plugin} from &#39;chart.js&#39;;

declare module &#39;chart.js&#39; {
  interface PluginOptionsByType&lt;TType extends ChartType&gt; {
    chartAreaBorder?: {
      borderColor?: string,
      borderWidth?: string
    }
  }
}

huangapple
  • 本文由 发表于 2023年5月28日 03:59:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/76348797.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定