Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: vue-tsc reports type errors #1050

Open
1 task
merlinstardust opened this issue Jul 12, 2023 · 0 comments
Open
1 task

[Bug]: vue-tsc reports type errors #1050

merlinstardust opened this issue Jul 12, 2023 · 0 comments

Comments

@merlinstardust
Copy link

Would you like to work on a fix?

  • Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

When trying to add a Scatter chart or a Line chart, I get several TypeScript errors and unfortunately, the errors are very long and hard to parse, so I have no idea what is wrong. This may happen with other chart types as well, but Scatter and Line (especially a combined Scatter with line data) is what I need.

Or in some cases, the error is simple but makes no sense. For instance, I get Type '"radialLinear"' is not assignable to type '"linear"'. but I'm not using radialLinear at all, so I don't know why it's complaining.

I tried importing types and assigning them to my variables, but that still doesn't work.

This could be related to #1048, but I also had this issue when I didn't mix chart types.

Link to repo/CI with type issues (also copied below for ease of access)

Error: src/components/ExampleGraph.vue(3,14): error TS2322: Type '{ labels: any[]; datasets: ({ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; } | { type: string; xAxisID: string; ... 4 more ...; backgroundColor?: undefined; })[]; }' is not assignable to type 'ChartData<"scatter", (number | Point | null)[], unknown>'.
  Types of property 'datasets' are incompatible.
    Type '({ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; } | { type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; borderWidth?: undefined; backgroundColor?: und...' is not assignable to type 'ChartDataset<"scatter", (number | Point | null)[]>[]'.
      Type '{ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; } | { type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; borderWidth?: undefined; backgroundColor?: unde...' is not assignable to type 'ChartDataset<"scatter", (number | Point | null)[]>'.
        Type '{ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; }' is not assignable to type 'ChartDataset<"scatter", (number | Point | null)[]>'.
          Type '{ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; }' is not assignable to type '_DeepPartialObject<{ type: "scatter"; } & LineControllerDatasetOptions>'.
            Types of property 'type' are incompatible.
              Type 'string' is not assignable to type '"scatter"'.
Error: src/components/ExampleGraph.vue(3,27): error TS2322: Type '{ responsive: boolean; maintainAspectRatio: boolean; plugins: { legend: { display: boolean; }; }; elements: { point: { radius: number; }; line: { borderWidth: number; }; }; scales: { y: { title: { display: boolean; text: string; color: string; font: { ...; }; }; grid: { ...; }; border: { ...; }; ticks: { ...; }; }; ...' is not assignable to type '_DeepPartialObject<CoreChartOptions<"scatter"> & ElementChartOptions<"scatter"> & PluginChartOptions<"scatter"> & DatasetChartOptions<"scatter"> & ScaleChartOptions<...> & LineControllerChartOptions>'.
  Types of property 'scales' are incompatible.
    Type '{ y: { title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }; x:...' is not assignable to type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<keyof CartesianScaleTypeRegistry>; }>'.
      Property 'y' is incompatible with index signature.
        Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "time"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
          Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "timeseries"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }>'.
            The types of 'ticks.align' are incompatible between these types.
              Type 'string' is not assignable to type '"inner" | "start" | "center" | "end" | undefined'.
Error: src/components/ExampleUnmixedGraph.vue(3,11): error TS2322: Type '{ labels: any[]; datasets: { data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }[]; }' is not assignable to type 'ChartData<"line", (number | Point | null)[], unknown>'.
  Types of property 'datasets' are incompatible.
    Type '{ data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }[]' is not assignable to type 'ChartDataset<"line", (number | Point | null)[]>[]'.
      Type '{ data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }' is not assignable to type 'ChartDataset<"line", (number | Point | null)[]>'.
        Type '{ data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions>'.
          Types of property 'pointStyle' are incompatible.
            Type 'boolean' is not assignable to type 'false | "line" | "circle" | "rect" | "dash" | "cross" | "crossRot" | "rectRounded" | "rectRot" | "star" | "triangle" | ((ctx: ScriptableContext<"line">, options: AnyObject) => PointStyle | undefined) | _DeepPartialObject<...> | _DeepPartialObject<...> | readonly (false | ... 12 more ... | undefined)[] | undefined'.
Error: src/components/ExampleUnmixedGraph.vue(3,24): error TS2322: Type '{ responsive: boolean; maintainAspectRatio: boolean; plugins: { legend: { display: boolean; }; }; elements: { point: { radius: number; }; line: { borderWidth: number; }; }; scales: { y: { title: { display: boolean; text: string; color: string; font: { ...; }; }; grid: { ...; }; border: { ...; }; ticks: { ...; }; }; ...' is not assignable to type '_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<...> & LineControllerChartOptions>'.
  Types of property 'scales' are incompatible.
    Type '{ y: { title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }; x:...' is not assignable to type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<keyof CartesianScaleTypeRegistry>; }>'.
      Property 'y' is incompatible with index signature.
        Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "time"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
          Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "timeseries"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }>'.
            The types of 'ticks.align' are incompatible between these types.
              Type 'string' is not assignable to type '"inner" | "start" | "center" | "end" | undefined'.
ERROR: "type-check" exited with 2.

Reproduction

merlinstardust/chartjs-type-issue#1

chart.js version

4.3.0

vue-chartjs version

5.2.0

Possible solution

I am currently solving this by setting data and options to the any type, though I would prefer not to do that.

I would like to see an example set of code with typings so I can emulate that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant