setup 语法糖 导出 type 飘红

Question

老师您好，问题和这个相同
setup 3.2写法的 导出 type 飘红
也看了些参考资料
ts import type和export type 解决vite中导入类型报错的问题
但是我发现如果接口也导出的话，可以规避这个问题，如下：


但是不是很能理解为什么会这样，根本原因是什么，望解惑

Answer 1

阿康喜欢蓝色 2023-05-16 00:28:19

还有一种更简单的方法是使用 ComponentOptionsWithoutProps 这个类型来声明并导出组件类型。例如：

在这个例子中，我们使用 ComponentOptionsWithoutProps 来声明组件类型，并将其赋值给一个常量 options。在 setup() 函数中，将 options 导出即可。

无论使用哪种方法，都可以避免类型错误，并且不需要从 Vue 继承组件类型。

Answer 2

阿康喜欢蓝色 2023-05-16 00:22:51

在 Vue 3.2 中，<script setup>可以用来简化组件的编写，但是在导出组件类型时，可能会出现编译时类型错误的问题。

如果你在 <script setup> 中声明了一个组件类型，并将其导出，可能会收到以下错误：

Error: [VueCompilerError] Exported `type` cannot be a subclass of `Vue`.

这个错误是由于 TypeScript 在处理组件类型时，会将其视为一个 Vue 子类。但是，在 <script setup> 中，组件类型被视为一个“基类”，因此不支持继承自 Vue。因此，你需要对类型做一些修改来解决这个问题。

一种解决方法是使用 defineComponent 函数来定义组件类型，而不是继承自 Vue。例如：

Answer 3

张轩 2023-03-15 09:51:51

同学你好

我试了一下，这看起来应该是一个 ts 错误，这里只要 export 一个变量也可能出现同样的错误。我也没法理解第二种为什么不会有问题。

但是在单独的 ts 文件中其实并不会出现这个错误，所以这里应该是volar 以及 ts setup 语法糖联合出现的一个问题。

所以这里最好是遵循一个简单的原则，在 setup 语法糖中不要显式的导出。

要导出的内容，可以添加一个普通的 script。

• 提问者 EastSummer #1

  好的，我仔细读了下官方文档，确实有提到：声明模块的具名导出使用单独标签（https://cn.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script）；
  但是下面这句‘在 <script setup> 中创建的变量不会作为属性添加到组件实例中，这使得它们无法从选项式 API 中访问。我们强烈反对以这种方式混合 API’的后半句不是很理解‘以这种方式混合 API’具体是指的什么呢？(因为setup语法糖本身就不支持name、inheritAttrs等，无法避免组合式和选项式的混用吧）

• 张轩 回复 提问者 EastSummer #2

  同学你好
  我认为这里说的是在 <script setup> 中的变量，比如 const a = ref(1) 你不能在普通的 <script> 中直接使用它，比如直接引用 a.value ，这样会报错。