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
