[Bug]: Vue2 Legacy missing typescript definitions

[Santobert]

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

Following the example on https://vue-chartjs.org/guide/#creating-your-first-chart I run into an issue with typescript:

Could not find a declaration file for module 'vue-chartjs/legacy'. '.../node_modules/vue-chartjs/legacy/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/vue-chartjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-chartjs/legacy';`Vetur(7016)

Unfortunatley there are no types for this project available at https://github.com/DefinitelyTyped/DefinitelyTyped

I could solve this issue by using vue-chartjs@3.5.1.

Reproduction

https://vue-chartjs.org/guide/#creating-your-first-chart

chart.js version

3.7.1

vue-chartjs version

4.0.6

Possible solution

Add type definitions for the legacy package of vue-chartjs

[thabarbados]

vue-chartjs/legacy doesn't have typescript definitions as it is written using javascript

[Santobert]

As far as I can see with version v3 vue-chartjs had type declarations. It seems these were lost during the transition to v4 and vue-chartjs/legacy.
https://github.com/apertureless/vue-chartjs/tree/v3.5.6/types

Is it possible, to add the type declarations back?

[thabarbados]

Yes, we will try to release it as soon as possible.

[thabarbados]

@Santobert, before release, you can try to import types from vue-chartjs/dist/....
Please let me know if this helped you.

[Santobert]

Thanks for the hint. Unfortunately, I don't know how to import types correctly. As far as I understand typescript, it needs a declaration of vue-chartjs/legacy, which is not part of vue-chartjs/dist/...

I'm happy to test things, if you can tell me how.

[thabarbados]

@Santobert We added typescript definitions for Vue 2 charts at release 4.1.0

[Santobert]

@thabarbados thanks for the quick fix. Types are there now and at least the bar chart works flawlessly (as far as I can see). Unfortunately chart types other than the bar chart cannot be used as Vue components.

Minimal example:

<template>
  <div>
    <LineChartGenerator
      :chart-options="chartOptions"
      :chart-data="chartData"
      chart-id="line-chart"
      dataset-id-key="label"
    />
  </div>
</template>

<script lang="ts">
import { Chart, registerables } from "chart.js";
import Vue from "vue";
import { Line as LineChartGenerator } from "vue-chartjs/legacy";

Chart.register(...registerables);

export default Vue.extend({
  components: { LineChartGenerator },
  data() {
    return {
      chartData: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 39, 10, 40, 39, 80, 40],
          },
        ],
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
});
</script>

Funny thing is that while the error is reported, you can see the rendered chart in the background.

index.d.ts

[glennpierce]

Just experienced the same issue trying to port to the latest vue-chartjs

import { Line } from 'vue-chartjs/legacy';

@Component({
  components: { Bar, Line },
})
export default class SomeChart extends Vue {  ...

Gives

Cannot use namespace 'Line' as a value.

If I gointo the definition of Line it is just an empty namespace.

[yoooz]

Report my trying

wrote node_modules/vue-chartjs/legacy/index.d.ts directory

For example, namespace Line rewrite below reference by Bar

Gives nothing error the above

From there, I think this issue's cause is building declaration commands.

Sorry my poor English..

export namespace Line {
  namespace props {
    namespace chartData {
      const type: ObjectConstructor
      const required: boolean
    }
    namespace chartOptions {
      const type_1: ObjectConstructor
      export { type_1 as type }
      function _default(): void
      export { _default as default }
    }
    namespace datasetIdKey {
      const type_2: StringConstructor
      export { type_2 as type }
      const _default_1: string
      export { _default_1 as default }
    }
    namespace chartId {
      const type_3: StringConstructor
      export { type_3 as type }
      export { chartId as default }
    }
    namespace width {
      const type_4: NumberConstructor
      export { type_4 as type }
      const _default_2: number
      export { _default_2 as default }
    }
    namespace height {
      const type_5: NumberConstructor
      export { type_5 as type }
      const _default_3: number
      export { _default_3 as default }
    }
    namespace cssClasses {
      const type_6: StringConstructor
      export { type_6 as type }
      const _default_4: string
      export { _default_4 as default }
    }
    namespace styles {
      const type_7: ObjectConstructor
      export { type_7 as type }
      function _default_5(): void
      export { _default_5 as default }
    }
    namespace plugins {
      const type_8: ArrayConstructor
      export { type_8 as type }
      function _default_6(): any[]
      export { _default_6 as default }
    }
  }
  function data(): {
    _chart: any
  }
  function data(): {
    _chart: any
  }
  namespace computed {
    function hasAnnotationPlugin(): boolean
    function hasAnnotationPlugin(): boolean
  }
  function created(): void
  function created(): void
  function mounted(): void
  function mounted(): void
  namespace watch {
    export namespace chartData_1 {
      function handler(newValue: any, oldValue: any): void
      const deep: boolean
    }
    export { chartData_1 as chartData }
    export namespace chartOptions_1 {
      export function handler_1(newValue: any): void
      export { handler_1 as handler }
      const deep_1: boolean
      export { deep_1 as deep }
    }
    export { chartOptions_1 as chartOptions }
  }
  namespace methods {
    function renderChart(data: any, options: any): void
    function renderChart(data: any, options: any): void
    function chartDataHandler(newValue: any, oldValue: any): void
    function chartDataHandler(newValue: any, oldValue: any): void
    function chartOptionsHandler(options: any): void
    function chartOptionsHandler(options: any): void
    function updateChart(): void
    function updateChart(): void
    function getCurrentChart(): any
    function getCurrentChart(): any
    function setCurrentChart(chart: any): void
    function setCurrentChart(chart: any): void
  }
  function beforeDestroy(): void
  function beforeDestroy(): void
  function render(createElement: any): any
}

[glennpierce]

Report my trying

wrote node_modules/vue-chartjs/legacy/index.d.ts directory

For example, namespace Line rewrite below reference by Bar

Gives nothing error the above

From there, I think this issue's cause is building declaration commands.

Sorry my poor English..

export namespace Line {
  namespace props {
    namespace chartData {
      const type: ObjectConstructor
      const required: boolean
    }
    namespace chartOptions {
      const type_1: ObjectConstructor
      export { type_1 as type }
      function _default(): void
      export { _default as default }
    }
    namespace datasetIdKey {
      const type_2: StringConstructor
      export { type_2 as type }
      const _default_1: string
      export { _default_1 as default }
    }
    namespace chartId {
      const type_3: StringConstructor
      export { type_3 as type }
      export { chartId as default }
    }
    namespace width {
      const type_4: NumberConstructor
      export { type_4 as type }
      const _default_2: number
      export { _default_2 as default }
    }
    namespace height {
      const type_5: NumberConstructor
      export { type_5 as type }
      const _default_3: number
      export { _default_3 as default }
    }
    namespace cssClasses {
      const type_6: StringConstructor
      export { type_6 as type }
      const _default_4: string
      export { _default_4 as default }
    }
    namespace styles {
      const type_7: ObjectConstructor
      export { type_7 as type }
      function _default_5(): void
      export { _default_5 as default }
    }
    namespace plugins {
      const type_8: ArrayConstructor
      export { type_8 as type }
      function _default_6(): any[]
      export { _default_6 as default }
    }
  }
  function data(): {
    _chart: any
  }
  function data(): {
    _chart: any
  }
  namespace computed {
    function hasAnnotationPlugin(): boolean
    function hasAnnotationPlugin(): boolean
  }
  function created(): void
  function created(): void
  function mounted(): void
  function mounted(): void
  namespace watch {
    export namespace chartData_1 {
      function handler(newValue: any, oldValue: any): void
      const deep: boolean
    }
    export { chartData_1 as chartData }
    export namespace chartOptions_1 {
      export function handler_1(newValue: any): void
      export { handler_1 as handler }
      const deep_1: boolean
      export { deep_1 as deep }
    }
    export { chartOptions_1 as chartOptions }
  }
  namespace methods {
    function renderChart(data: any, options: any): void
    function renderChart(data: any, options: any): void
    function chartDataHandler(newValue: any, oldValue: any): void
    function chartDataHandler(newValue: any, oldValue: any): void
    function chartOptionsHandler(options: any): void
    function chartOptionsHandler(options: any): void
    function updateChart(): void
    function updateChart(): void
    function getCurrentChart(): any
    function getCurrentChart(): any
    function setCurrentChart(chart: any): void
    function setCurrentChart(chart: any): void
  }
  function beforeDestroy(): void
  function beforeDestroy(): void
  function render(createElement: any): any
}

Do you have an example how I can use your repository to test and
don't have time to wait for a new release.
In my package.json I added

"postinstall": "cd ./node_modules/vue-chartjs && npm install && npm run build"
to scripts and in dependencies added
"vue-chartjs": "https://github.com/yoooz/vue-chartjs/tree/develop",

but get the error

Cannot find module 'vue-chartjs/legacy' or its corresponding type declarations.

Not used a forked npm repository before so maybe doing something wrong.

[yoooz]

@glennpierce

Sorry, I don't have any idea how you can try my repository easily.

But I can tell you my way

1. clone and build my vue-chartjs repository
   1. build command is pnpm build and please check emitted index.d.ts
2. replace your/project/node_modules/vue-chartjs/index.d.ts and yoooz/vue-chartjs/index.dts

Even if yoooz/vue-chartjs add your package.json , installing only yoooz/vue-chartjs/package.json only .
I think easily install my commit if my pull request merged.