Missing type for the component

[trygveaa]

As far as I can see, there is no type for the component itself, only for the options sent into the component.

This type is necessary if you have a ref on the component and want to access the chart property.

[Denyllon]

Thank you for the report. Could you describe the problem more precisely? It could be even better to see the problem live, so could you prepare any minimal example (or repository generated through Vue CLI) where the issue is noticeable? Kind regards!

[trygveaa]

Here is an example: https://codesandbox.io/s/vue-template-qjjdy?module=%2Fsrc%2FApp.vue

On line 17, const chartEl = ref<any>();, I'm using any as the type for the Chart element. I would like to use a proper type, but I didn't find any that fits.

[Denyllon]

Thank you for explanation. It definitely could be an enhancement of the wrapper, because you should indicate the Chart class there, but unfortunately it will not work, because mentioned class does not contain the chart field for now.

For now, i recommend you to temporarily augment Chart classof highcharts-vue module, so that it would have the chart: Highcharts.Chart field defined within class definition.

Probably you will also need to augment Highcharts.Chart interface with showLoading function, because it is currently marked as a private.

[trygveaa]

For now, i recommend you to temporarily augment Chart classof highcharts-vue module, so that it would have the chart: Highcharts.Chart field defined within class definition.

Okay, so the Chart class in this module is the correct type for the chart element, it's just missing the chart prop?

Probably you will also need to augment Highcharts.Chart interface with showLoading function, because it is currently marked as a private.

Hm, I don't see it marked as private. I'm looking at line 215656 of highcharts.d.ts in the highcharts module v7.2.1, i.e.:

    /**
     * Dim the chart and show a loading text or symbol. Options for the loading
     * screen are defined in the loading options.
     *
     * @param str
     *        An optional text to show in the loading label instead of the
     *        default one. The default text is set in lang.loading.
     */
    showLoading(str?: string): void;

[trygveaa]

For now, i recommend you to temporarily augment Chart classof highcharts-vue module, so that it would have the chart: Highcharts.Chart field defined within class definition.

Okay, so the Chart class in this module is the correct type for the chart element, it's just missing the chart prop?

No, I checked now. The instance you get for the ref is not the same as the Chart class.

We probably want something which extends from ComponentOptions or ChartPropsObject and adds the chart property. I'm not sure what the difference between those two interfaces are though?

[trygveaa]

Hm, actually I don't understand why ComponentOptions is defined at all. As far as I can see, all the properties listed in that are props to the highcharts component, not component options?

[Denyllon]

Hm, I don't see it marked as private. I'm looking at line 215656 of highcharts.d.ts in the highcharts module v7.2.1, i.e.:

Apologize, my bad. The following @private statement misled me. You're totally right. https://github.com/highcharts/highcharts/blob/b976359ba5c01ca7271b76c041e60c24b8ced94a/ts/parts/Dynamics.ts#L14-L21

Those type definitions should definitely be reviewed, tested in different ways, and most probably refactored.

I assume there should be some type which extends the Vue's Component with the chart property.

[jszuminski]

Closing as fixed with https://github.com/highcharts/highcharts-vue/commit/7310e3c87e901c4d9b1e2272512edc934256c3d1.

PS. We're currently working on the TypeScript definitions for both Vue 2 and Vue 3 full TypeScript support: https://github.com/highcharts/highcharts-vue/pull/251. You can expect an update in the upcoming weeks.