在纯 TypeScript 文件中导入 Vue 组件失败

Question

我有一个 Vue 项目，我在其中创建了一个新的普通 TypeScript 文件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();

我的类BaseInput有公共方法validate() （我可以从其他 Vue 组件中成功调用它）。 但是 TypeScript 现在抱怨，因为它找不到BaseInput类。 当我尝试遵循导入时，我最终出现在shims-vue.d.ts文件中。

如何从.vue文件外部正确导入 Vue 组件？ 或者是否有更好的解决方案为 Vue 提供一些全局 TypeScript 方法，然后在一个普通的.ts文件中定义它们？

Answer 1

.vue文件包含很多东西：模板部分、脚本部分和样式部分……而 typescript 不知道如何处理。 组件不是为了在服务中导入而设计的，它是用来显示/渲染某些东西的，绝对不是用来定义类型的。

在单独的文件中定义类型或接口需要什么，比如./models/input.ts ，您可以在其中定义输入类型

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

我喜欢在我的接口前加上“I”，但有些人说你不应该（这取决于你）

然后在你的组件.vue

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

并在您的服务中

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);
  }
}