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

Posted 2023-02-23

【中文标题】在普通 TypeScript 文件中导入 Vue 组件失败

【英文标题】：Import Vue component in plain TypeScript file fails

【发布时间】：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 文件中定义它们？

【参考方案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);