在普通 TypeScript 文件中导入 Vue 组件失败答案

【问题标题】：Import Vue component in plain TypeScript file fails在普通 TypeScript 文件中导入 Vue 组件失败
【发布时间】：2021-01-04 14:06:39
【问题描述】：

我有一个 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 文件中定义它们？

【问题讨论】：

标签： javascript typescript vue.js vuejs2

【解决方案1】：

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

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

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

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

然后在你的组件中.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);
  }
}

【讨论】：