Vue 3：设置脚本，TS 问题："An import declaration can only be used in a namespace or module."

Question

在 Vue 3 中使用带有打字稿的设置脚本时，我在 vscode 中收到一条错误消息： “导入声明只能在命名空间或模块中使用。”

外部库和自己的 vue 组件会发生这种情况。

我。即：

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

所有这些都在 vscode 中出现红线。其他如从 vue 或 vue-router 导入或自己的可组合项不会出现红线。我找不到有助于修复它的方法。

有人明白这一点并有线索吗？

Answer 1

通常你应该先导入。

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

Answer 2

我无法用枚举（在 SFC 中）但用接口重复错误。这就是为什么我现在在我的描述中添加了一个接口导入。

经过更长时间的搜索，我找到了一个可行的解决方案。

解决方案 1：“导入类型”

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

解决方案 2：“导入 * 为”

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

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

Both seem to not throw an error.

Vue 3：设置脚本，TS 问题："An import declaration can only be used in a namespace or module."

Vue 3: Setup Script, TS Problem: "An import declaration can only be used in a namespace or module."

typescript

eslint

vue.js

解决方案 1：“导入类型”

解决方案 2：“导入 * 为”