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

Question

I have defined an interface in my Vue component script section and when I tried to import it in another typescript file this error appear:

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'
  }
}

I found a solution to VSCode in this question but I'am using webstorm

UPDATE: I do not want to move the interface declaration to another file

Answer 1

What IDE version do you use? Can't see any errors when using your code in 2020.3.1 (with the language service enabled in Settings | Languages & Frameworks | TypeScript ):

Answer 2

Try declaring BenefitDetails interface in de dedicated ts file (ie: benefitDetails.model.ts)

Then import the BenefitDetails where needed