[Vuejs]-Typing Component Ref in Vue results in TS2344 error

by

0👍

✅

You have a

export default /* FormCheckbox */ { ... }

import FormCheckbox from ...
export default /* TestComp */ defineComponent({ ... })

Buuuut… defineComponent expects your inported component to be a Component returned by defineComponent. It won’t allow you to use object.

What you need is to fix FormCheckbox to also use defineComponent

If you don’t have access to code, you may use

// shims-vue.d.ts

/// <reference types="vite/client" />
/// <reference types="vue/ref-macros" />

// Mocks all files ending in `.vue` showing them as plain Vue instances
declare module '*.vue' {
  import type { DefineComponent } from 'vue'

  const component: DefineComponent<{}, {}, any>
  export default component
}

or

import type { DefineComponent } from 'vue'
let myRef = Ref<DefineComponent<{}, {}, any>>(/* implied `undefined` */)

or use this.$refs.selectAllCheckbox then you don’t need to define it at all iirc

Leave a comment