Within my Vue project, I have created a new TypeScript file named 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();
In my BaseInput class, there is a public method called validate() that I can successfully call from other Vue components. However, TypeScript is now displaying an error because it cannot locate the BaseInput class. Following the import leads me to the shims-vue.d.ts file.
I am encountering difficulty with importing a Vue component outside of a .vue file. Is there a proper way to achieve this? Alternatively, is there a better approach for providing Vue with global TypeScript methods rather than defining them in a separate .ts file?