Vue / Typescript, got Module '“*.vue”' has no exported member

问题

I want to export several interfaces together with Component from .vue file.

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>

But when I import it from another .ts file, I got:

What can I do to import the interface successfully?

回答1:

You can drop the { } from your import. It’s a default export, so then you write import IBasic from "@/../containers/Basic"

回答2:

You can try to use ktsn/vuetype than will generate custom declaration file for every your component file, instead of using default shims-vue.d.ts declaration.

回答3:

Using this Plugin in VS Code solved the Problem for me: https://github.com/HerringtonDarkholme/vue-ts-plugin

It is a fork that is actively maintained. I ran yarn add -D ts-vue-plugin and added these compiler options to my tsconfig.json:

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

My Code (storybook 6 file button.stories.ts):

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

With this both the type import finally works and I can jump to the file (CMD+click) instead of jumping to the shims-vue.d.ts like it used to. Good luck!

来源：https://stackoverflow.com/questions/56126929/vue-typescript-got-module-vue-has-no-exported-member

标签

typescript

Vue.js

vuejs2