vue3 typescript component can't call method in global mixin

Question

I've been struggling with this for about a week now, so if anyone knows, I'd be grateful if you could help.

I have been converting vue2-based code to vue3 as a new project. I do not use the coposition api, but use it as an object-based component way.

Since external modules written in typscript are also imported and used, the component is wrapped with defineComponent().

Everything works fine, but the global mixin part is the problem. As described in the vue official document, the mixin written in *.js was registered as a global mixin with app.mixin().

 // mixin.js 
 export default {
   methods: {
     registerBackButtonCallback() {}
   }
 }

If I call this.registerBackButtonCallback() in the component file,

'Type 'never' has no call signatures'

error and compilation fails. but calling this.registerBackButtonCallback() works well when I use it as a local mixin.

An error occurs only when <script lang="ts"> is set. It compiles without error when "strict" or "noImplicitThis" option in "tsconfig.json" is set to false.

For above reasons, I think this error must be related to typescript . I thought it would be good to do type argumenting, so in src/shims-vue.d.ts, like the one below I tried adding it, but I still get the error.

declare module 'vue/types/vue' {
  interface Vue {
    registerBackButtonCallback: () => void
  }
}

Has anyone tried calling mehtod of global mixin with script lang="ts" in vue3 component?

Thanks a lot for your advice.

Answer 1

Customing the type Vue is a Vue2 practice. In Vue3, custom properties are defined in ComponentCustomProperties of '@vue/runtime-core'