chartjs / chartjs/Chart.js

Chart.JS 4.5.1 breaks with TS `--stableTypeOrdering` and TS 7.

Open
#12,285 1 comment 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

```ts
import {ChartDataset, ChartTypeRegistry} from "chart.js"

const a: ChartDataset = {} as ChartDataset<"scatter">;
```

`tsc file.ts --ignoreConfig --stableTypeOrdering` should not produce errors.

### Current behavior

```
test.ts:3:7 - error TS2322: Type 'ChartDataset<"scatter">' is not assignable to type 'ChartDataset'.
Type 'ChartDataset<"scatter">' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<...> & ChartDatasetProperties<...>'.
Type 'ChartDataset<"scatter">' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions>'.
Types of property 'animation' are incompatible.
Type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined' is not assignable to type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
Type '_DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }>' is not assignable to type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
Type '_DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }>' is not assignable to type '_DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }>'.
Types of property 'duration' are incompatible.
Type 'number | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.
Type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.
Type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined' is not assignable to type '(ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined'.
Types of parameters 'ctx' and 'ctx' are incompatible.
Type 'ScriptableContext<"radar">' is not assignable to type 'ScriptableContext<"line">'.
Types of property 'dataset' are incompatible.
Type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<...> & ChartDatasetProperties<...>' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<...> & ChartDatasetProperties<...>'.
Type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<...> & ChartDatasetProperties<...>' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions>'.
Types of property 'animation' are incompatible.
Type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined' is not assignable to type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
Type '_DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }>' is not assignable to type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
Type '_DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }>' is not assignable to type '_DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }>'.
Types of property 'duration' are incompatible.
Type 'number | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined'.
Type '(ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined'.
Type '(ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined' is not assignable to type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined'.
Types of parameters 'ctx' and 'ctx' are incompatible.
Type 'ScriptableContext<"line">' is not assignable to type 'ScriptableContext<"radar">'.
Types of property 'dataset' are incompatible.
Type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<...> & ChartDatasetProperties<...>' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<...> & ChartDatasetProperties<...>'.
Type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<...> & ChartDatasetProperties<...>' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions>'.
Types of property 'borderWidth' are incompatible.
Type 'number | readonly (number | undefined)[] | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined' is not assignable to type 'number | readonly (number | undefined)[] | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.
Type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined' is not assignable to type 'number | readonly (number | undefined)[] | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.

3 const a: ChartDataset = {} as ChartDataset<"scatter">;
~

Found 1 error in test.ts:3
```

### Reproducible sample

https://www.typescriptlang.org/play/?stableTypeOrdering=true#code/JYWwDg9gTgLgBAbwMIAsCGsAiaZoM4CmMANHKhjACoCeYBASgQObB4xTUC+cAZlBCDgAiAMbpYAOgBWeIQFgAUIpEQAdmzhoAXGXExsuQjAA8AawLUIPXRRp1GLNhwB8cALyJu+G1hz4ixkJ4IjgwBFBCzgDcigBuEMAAJppRQA

### Optional extra steps/info to reproduce

According to TS, this is due to `UnionToIntersection` which isn't officially supported.

https://github.com/microsoft/TypeScript/issues/63733

### Possible solution

_No response_

### Context

_No response_

### chart.js version

v4.5.1

### Browser name and version

NA

### Link to your project

NA

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.