时间戳

首页 > 解决方案 > 在普通 TypeScript 文件中导入 Vue 组件失败

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

问题描述

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

标签： javascripttypescriptvue.jsvuejs2

解决方案

一个.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);
  }
}

推荐阅读