typescript - ¿Cómo puedo importar un componente de clase de Vue con los tipos correctos?

Si tengo un componente de clase Vue de un solo archivo, por ejemplo:

// MyComponent.vue
<template>
  <div></div>
</template>

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class MyComponent extends Vue {
  public message: string = 'Hello!'
}

Y lo importo en otro lugar, y obtengo una instancia de él.

import MyComponent from "./MyComponent.vue";
...
const foo = ... as MyComponent;
foo.message = "goodbye";

Con una configuración estándar de Vue CLI 3, esto produce un error, porque contiene shims-vue.d.ts con el siguiente contenido:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Según lo entiendo, esto significa que cada vez que escribas import Foo from "./Foo.vue", entonces Foo será solo un alias de Vue, y no podrás acceder a sus miembros.

Esto parece ser el caso si importas desde archivos .ts. ¡Si importas desde archivos .vue, mágicamente funciona!

Desafortunadamente, todas mis pruebas son archivos .spec.ts, así que no puedo importar los tipos de ningún componente. Esto hace que las pruebas sean difíciles. ¿Hay alguna manera de solucionar esto?

Respuesta #1

La forma en que lo hago en mis proyectos de Vue 2 y Vue 3 es la siguiente:

1. Crea un archivo Foo.vue y agrega una etiqueta script al archivo Foo.vue.ts. Aquí hay un fragmento.

   <template>
      <div>... Your template code here ...</div>
   </template>
   
   <script lang="ts" src="./Foo.vue.ts" />
   

2. Escribe el código del componente en el archivo Foo.vue.ts.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
})
export default class MyComponent extends Vue {
  public message: string = 'Hello!'
}

3. Ahora puedes usar la palabra clave as.

import MyComponent from "./MyComponent.vue";
...
const foo = obj as MyComponent;
foo.message = "goodbye";