Vue组件导入接口时如何避免TS2614错误

Question

我在我的 Vue 组件脚本部分定义了一个接口，当我尝试将它导入另一个 typescript 文件时，出现此错误：

TS2614: Module '"../pages/categories/alimentation/index.vue"' has no exported member 'BenefitDetails'. Did you mean to use 'import BenefitDetails from "../pages/categories/alimentation/index.vue"' instead

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

export interface BenefitDetails {
  name: string
  frequency: string
  cost: number
  icon: string
  description: string
}

@Component
export default class MyComponent extends Vue {
  // my props ...

  mounted() {}
}
</script>

---

// Error in import below
import { BenefitDetails } from '~/pages/categories/alimentation/index.vue'

export function getBenefitFrequencyColor({ frequency }: BenefitDetails) {
  switch (frequency) {
    case 'Mensal':
      return 'blue'
    default:
      return 'yellow'
  }
}

我在这个问题中找到了 VSCode 的解决方案，但我正在使用 webstorm

更新：我不想将接口声明移动到另一个文件

Answer 1

你用的是什么IDE版本？ 在 2020.3.1 中使用您的代码时看不到任何错误（在Settings | Languages & Frameworks | TypeScript中启用了语言服务）：

Answer 2

尝试在专用 ts 文件中声明 BenefitDetails 接口（即：benefitDetails.model.ts）

然后在需要的地方导入 BenefitDetails