組件引用的 Vuejs 類型

Question

我有以下情況：我這里有一個組件：

<div class="border shadow p-2">
    <chart :config="barConfig" ref="linechart" />
</div>

現在我可以像這樣訪問它：

let linechart = ref(null)

問題是，折線圖不僅僅是一個普通的linechart元素。 通常我會做類似的事情：

let linechart = ref<HTMLElement>()

但它實際上是一個組件。 我可以使用它訪問方法

linechart.value.update()

但是 typescript 給我一個update()不存在的錯誤。 我試過這個：

import chart from "@/components/chart/chart.vue";
let linechart = ref<typeof chart>();
linechart.value.update();

但仍然沒有運氣。 有沒有辦法在沒有 typescript 錯誤的情況下獲取公開的方法？

需要明確的是， .update()方法有效。 就是typescript找不到方法。 我如何解決它？

Answer 1

我發現了。 它實際上寫在文檔中。

https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs

這很完美：

import chart from "@/components/chart/chart.vue";

let linechart = ref<InstanceType<typeof chart>>();
linechart.value?.update();