如何使用 Vue3 和 Typescript 在 Quasar Framework 中定義 ref 方法的類型

Question

• 類星體框架 v2 測試版
• Vue 3 組合 Api
• Typescript

組件模板

<q-btn 
  @click.stop="showingActionMenu()" 
  color="grey-7" 
  round 
  flat 
  icon="more_vert"
>
  <q-menu
    ref="showAction"
    auto-close
  >
    ...                       
  </q-menu>
</q-btn>

setup() {
  ...
  const showAction = ref<Function | null>(null)
  ...
})

組件設置

return {
  ...
  showAction,
  showingActionMenu() {
    showAction?.value?.show()
  },
  ...
}

返回的方法顯示錯誤

Property 'show' does not exist on type 'Function'.

Answer 1

ref 的類型應該是從 quasar 框架導入的QMenu ：

import { QMenu } from 'quasar'
...
setup() {
  ...
  const showAction = ref<QMenu| null>(null)
  ...
  return {
    ...
    showAction,
    showingActionMenu() {
      showAction.value?.show()
    },
    ...
  }
}

現場演示