TS1258: A default export must be at the top level of a file or module declaration.

20240128001

TS1258: A default export must be at the top level of a file or module declaration.
ESLint: `<script setup>` cannot contain ES module exports.(vue/no-export-in-script-setup)

这个错误消息提到了两个问题。

---

首先，TypeScript 错误 TS1258 指出默认导出必须在文件或模块声明的顶层。这意味着不能将默认导出放在嵌套的作用域内，应该将其放在文件的最外层。

怎么解释呢？

当 TypeScript 报错 TS1258 时，它意味着默认导出（export default）必须在文件或模块声明的顶层。这是因为默认导出应该是文件或模块的主要导出，而不是包含在其他作用域（如函数或条件语句）中的局部导出。

换句话说，将默认导出放在嵌套的作用域内会违反 TypeScript 的规则。下面是一个示例，演示了将默认导出放置在嵌套作用域内的错误写法：

typescriptCopy Codefunction myFunction() {
  const myDefaultExport = 'Hello, World!';
  export default myDefaultExport; // 错误：默认导出不能在函数内部
}

正确的写法应该将默认导出放在文件或模块的顶层：

typescriptCopy Codeconst myDefaultExport = 'Hello, World!';
export default myDefaultExport;

这样就可以确保默认导出位于正确的位置，以便可以在其他模块中正确引用和使用它。

总结一下，在使用 export default 时，应该将其放在文件或模块的顶层，而不是嵌套的作用域内部。

---

其次，ESLint 错误 <script setup> cannot contain ES module exports. (vue/no-export-in-script-setup) 指出在 <script setup> 块中不能包含 ES 模块的导出。

意思就是说，ESLint 错误 <script setup> cannot contain ES module exports. (vue/no-export-in-script-setup) 指出在 Vue 3 中的 <script setup> 块中不能包含 ES 模块的导出。在 <script setup> 中，只能使用变量和函数的局部导出，而不能直接使用 ES 模块的导出语法。

在 Vue 3 中，<script setup> 是一种新的语法糖（关于语法糖，之后会出一篇单独了解一下），用于简化组件的编写。它允许在单个 <script> 块中同时处理组件的逻辑和导出组件选项。然而，由于其设计初衷是为了简化常见的模式，因此有一些限制，其中之一就是不支持 ES 模块的直接导出。

下面是一个违反该规则的例子：

<script setup lang="ts">
import MyComponent from './MyComponent.vue';
export { MyComponent }; // 错误：在 <script setup> 中不能使用 ES 模块的导出
</script>

正确的做法是使用变量或函数的局部导出，并在需要导出的地方使用这些局部导出，例如：

<script setup lang="ts">
import MyComponent from './MyComponent.vue';
const myComponent = MyComponent;
export { myComponent }; // 正确：使用局部导出
</script>

这样做可以避免直接在 <script setup> 中使用 ES 模块的导出，符合 Vue 3 的规范和 ESLint 的要求。

总结一下，在 Vue 3 的 <script setup> 中，只能使用变量和函数的局部导出，而不能直接使用 ES 模块的导出语法。

为了解决这两个问题，需确保以下几点：

1. 确保默认导出位于文件的最外层，而不是嵌套的作用域内。
2. 如果正在使用 Vue 3 的 <script setup>，确保不要在其中使用 ES 模块的导出，只使用局部导出。