Avoiding explicit 'any' with Chart.js v3

Question

We recently upgraded our Chart.JS library from v2 to v3, in part to make use of the new, integrated type annotations in our TypeScript code, however we've run into a number of issues where we've been forced to use an explicit "any" type cast in order to make the code work. Is there anyway around this?

Example: Setting a ChartDataset to present as a dotted line:

(cds as any).borderDash = [10, 5];

Works as intended, but if we don't add the explicit any cast we fail to compile with errors like:

[tsl] ERROR in /Users/bbowman/git/dragen-plots2/src/lib/plots/mbias_tool.ts(42,13)
TS2339: Property 'borderDash' does not exist on type 'ChartDataset<keyof ChartTypeRegistry, (number | ScatterDataPoint | BubbleDataPoint | null)[]>'.
Property 'borderDash' does not exist on type '_DeepPartialObject<{ type: "bar"; } & BarControllerDatasetOptions> & ChartDatasetProperties<keyof ChartTypeRegistry, (number | ... 2 more ... | null)[]>'.

Answer 1

You should cast it to the correct type in this case it's the line dataset:

(cds as ChartDataset<"line">).borderDash = [10, 5];