typescript - Vue 3: Setup-skript, TS-problem: "En importdeklaration kan endast användas i ett namnrymd eller modul."

när jag använder setup-scriptet i Vue 3 med TypeScript får jag ett fel i VSCode som säger: "Ett importdeklaration kan endast användas i ett namnrymd eller modul."

Det händer för externa bibliotek och egna Vue-komponenter.

d.v.s.

<script setup lang="ts">
  // ...

  // ASSETS
  import SvgCircle from '@/assets/img/IconsSvg/SvgCircle.vue';

  // MODELS
  import { IApiParams } from '@/models/api/apiparams.interface
  //  import { EBp } from '@/models/enum/baseParams.enum';

  // LIBS
  import justSafeGet from 'just-safe-get';

  // ...
</script>

Alla dessa får röda linjer i vscode. Andra som import från vue eller vue-router eller egna composables får inte röda linjer. Jag hittar inget användbart för att fixa det.

Förstår någon det och har en aning?

Svar #1

Som regel bör du bara importera först.

<script setup lang="ts">
  import SvgCircle from '@/assets/img/IconsSvg/SvgCircle.vue'; // ASSETS
  import { EBp } from '@/models/enum/baseParams.enum'; // MODELS
  import justSafeGet from 'just-safe-get'; // LIBS
  ... // Any code here
</script>

Svar #2

Jag kunde inte återskapa felet med enums (i SFC) men med interfaces. Därför lade jag nu till en interface-import i min beskrivning.

Efter en längre sökning hittade jag en fungerande lösning.

Lösning 1: "importera typ"

import type { IApiParams } from '@/models/api/apiparams.interface'

Lösning 2: "Importera * som"

import * as IApi from '@/models/api/apiparams.interface';

const apiParmams: IApi.IApiParams = {
    // ...
}

Båda verkar inte kasta ett fel.

Relaterade artiklar