英文:
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<"line"> = {
plugins: {
chartAreaBorder: {
borderColor: gridColor,
borderWidth: 1,
}
}
...other options..
}
This plugin actually works but typescript is saying:
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>'
Also i didn't know how to type arguments in this plugin so i put 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();
},
};
答案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 'chart.js';
declare module 'chart.js' {
interface PluginOptionsByType<TType extends ChartType> {
chartAreaBorder?: {
borderColor?: string,
borderWidth?: string
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论