javascript - La importación de un componente Vue en un archivo TypeScript simple falla

Tengo un proyecto Vue en el que creé un archivo TypeScript nuevo y simple Validation.ts:

import Vue from 'vue';
import BaseInput from '@/components/base/BaseInput.vue';

class ValidationService extends Vue {
  validateFields(fields: BaseInput[]): boolean {
    return this.$store.state.skipValidation || fields.map(field => field.validate()).every(Boolean);
  }
}

export default new ValidationService();

Mi clase BaseInput tiene el método público validate() (que puedo llamar con éxito desde otros componentes de Vue). Pero TypeScript ahora se queja porque no puede encontrar la clase BaseInput. Cuando intento seguir la importación, termino en el archivo shims-vue.d.ts.

¿Cómo puedo importar correctamente un componente de Vue desde fuera de un archivo .vue? ¿O existe una mejor solución para proporcionar a Vue algunos métodos globales de TypeScript que definirlos en un archivo .ts simple?

Respuesta #1

Un archivo .vue contiene muchas cosas: una parte de plantilla, una parte de script y una parte de estilo... y TypeScript no sabe cómo manejar eso. Un componente no está hecho para ser importado en un servicio, está hecho para mostrar/renderizar algo y definitivamente no está hecho para definir un tipo.

Lo que necesitas es definir un tipo o una interfaz en un archivo separado, digamos ./models/input.ts, donde puedes definir los tipos de tus entradas

export interface IBaseInput {
    name: string;
    ...
    ...
}
export interface IComplexInput {
    name: string;
    ...
    ...
}

Me gusta anteponer una "I" a mis interfaces, pero algunas personas dicen que no deberías (eso depende de ti)

entonces en tu componente .vue

import { IBaseInput } from './models/input.ts'
class BaseInput extends Vue implements IBaseInput {
    ...
}

y en tu Servicio

import { IBaseInput } from './models/input.ts'
class ValidationService extends Vue {
  validateFields(fields: IBaseInput[]): boolean {
    return this.$store.state.skipValidation || fields.map(field => field.validate()).every(Boolean);
  }
}