Vue / Typescript，模块““ * .vue”'没有导出的成员

Question

我想从Component文件中导出几个接口以及.vue。

Basic.vue：

<template>
    <div class="app">
        <router-view></router-view>
    </div>
</template>

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

export interface IBasic {
    name :string;
}

/**
 * Simplest container
 */
@Component
export class Basic extends Vue {}
export default Basic;
</script>

但是当我从另一个.ts文件导入它时，我得到了：

如何成功导入接口？

Answer 1

您可以尝试使用ktsn/vuetype，而不是为每个组件文件生成自定义声明文件，而不是使用默认的shims-vue.d.ts声明。

Answer 2

您可以从导入中删除{}。这是默认导出，因此您可以从“ @ / .. / containers / Basic”中编写导入IBasic

Answer 3

在VS Code中使用此插件可以为我解决问题： https://github.com/HerringtonDarkholme/vue-ts-plugin

这是一个主动维护的货叉。我运行了yarn add -D ts-vue-plugin，并将这些编译器选项添加到了tsconfig.json中：

compilerOptions: {
  "allowSyntheticDefaultImports": true,
  "plugins": [{ "name": "ts-vue-plugin" }]
}

我的代码（故事书6文件button.stories.ts）：

import Button, { BUTTON_TYPE } from '@/components/Button.vue';

有了这两种方法，类型导入终于可以了，我可以跳到文件（CMD + click），而不用像以前那样跳到shims-vue.d.ts。祝你好运！