vuejs3 - componente vue3 com typescript não consegue chamar método em mixin global

Estou lutando com isso há cerca de uma semana, então, se alguém souber, eu ficaria grato se pudesse ajudar.

Eu tenho convertido código baseado em vue2 para vue3 como um novo projeto. Eu não uso a composition API, mas utilizo de uma forma de componente baseada em objeto.

Como módulos externos escritos em TypeScript também são importados e usados, o componente é envolvido com defineComponent().

Tudo funciona bem, mas a parte do mixin global é o problema. Conforme descrito no documento oficial do Vue, o mixin escrito em *.js foi registrado como um mixin global com app.mixin().

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

Se eu chamar this.registerBackButtonCallback() no arquivo do componente,

O tipo 'never' não possui assinaturas de chamada

erro e a compilação falha. mas chamar this.registerBackButtonCallback() funciona bem quando eu uso como um mixin local.

Ocorre um erro apenas quando <script lang="ts"> está definido. Ele compila sem erro quando a opção "strict" ou "noImplicitThis" em "tsconfig.json" está definida como false.

Pelas razões acima, eu acho que esse erro deve estar relacionado ao TypeScript. Eu pensei que seria bom fazer a argumentação de tipo, então em src/shims-vue.d.ts, como no exemplo abaixo, eu tentei adicioná-la, mas ainda assim recebo o erro.

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

Alguém já tentou chamar o método de mixin global com script lang="ts" em um componente Vue3?

Muito obrigado pelo seu conselho.

Resposta #1

Customizar o tipo Vue é uma prática do Vue2. No Vue3, propriedades personalizadas são definidas em ComponentCustomProperties de '@vue/runtime-core'