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

问：

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

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。

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