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