如何从单个 vue 组件中导出接口？答案

【问题标题】：How to export an interface from a single vue component?如何从单个 vue 组件中导出接口？
【发布时间】：2021-11-02 10:52:50
【问题描述】：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

export interface OChannelsFilterFormForm {
    filterBy: {
      youCreated: boolean,
      youCanAddTo: boolean,
      hideType: string
    },
    sortBy: string
  }

@Component({
  components: {
    AButtonSubmit,
    ValidationObserver
  }
})
export default class OChannelsFilterForm extends Vue {
  form: any = {
    filterBy: {
      youCreated: false,
      youCanAddTo: false,
      hideType: 'none'
    },
    sortBy: 'aToZ'
  };

  submit () {
    this.$emit('child-output', this.form);
    this.$emit('close');
  }
}
</script>

没关系，将接口导入另一个vue组件，ide不报错。

但是一旦我构建，打字稿就说找不到他的界面：/

有没有办法从单个 vue 组件导出接口并导入另一个？

【问题讨论】：

这取决于IDE的实现等。不要将SFC中的命名导出用于可重用的东西，将它们分开保存。
您能否提供一个示例，您如何在另一个文件中import 接口和组件类？
肯定会扩展 OP
ahhh man.. 感谢您的提示：D 包含文件的组件需要添加 .vue 扩展名
这与 TS 本身无关，而是与 .vue 加载器和 IDE 行为未指定的事物有关。即使它在一个 IDE 中工作，它也可能在另一个 IDE 中中断。众所周知，命名导出并不总是像预期的那样工作。只是不要这样做，以免在其中一件事情破裂时让自己走投无路。可重用接口不是组件的一部分，因此它应该在单独的 .ts 中定义

标签： typescript vue.js

【解决方案1】：

答案很简单——在导入时添加 .vue 扩展名。

【讨论】：

FWIW，.vue 扩展名在 TS 导入中确实是必要的。不过有些工具不喜欢这样。