javascript - 在普通 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 有公共(public)方法 validate()(我可以从其他 Vue 组件中成功调用它)。但是 TypeScript 现在会报错，因为它找不到 BaseInput 类。当我尝试按照导入操作时，我最终进入了 shims-vue.d.ts 文件。

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

Answer 1

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

你需要在单独的文件中定义类型或接口(interface)，比如说 ./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);
  }
}