如何使用 JSDoc 通过脚本设置来记录 Vue 组件？

Question

我正在使用 TypeScript 构建一个 Vue 库。我想导出组件的文档，就像导出普通函数一样。

以前我们会这样做：

<script>
/**
 * This is the documentation of my component.
 */
export default {
}
</script>

<template></template>

但现在script setup：

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

<template></template>

我们如何记录组件？

Answer 1

您无法<script setup>在组件导出上使用 JSDoc。

它是一个编译器语法糖，可以导出设置函数，因此您显然无法注释编译器“生成”的函数。

<script>如果您确实需要 JSDoc，您应该使用带有默认导出的常规:)

<script>
/** This is my nice component documentation */
export default {
  name: 'MyComponent',
  setup() {
    // your code
  }, 
}
</script>

也适用于打字稿defineComponent包装器：

<script>
import { defineComponent } from 'vue'

/** This is my nice component documentation */
export default defineComponent({
  name: 'MyComponent',
  setup() {
    // your code
  }
})
</script>

编辑：正如 @EstusFlask 在评论中提到的，您可以在 SFC 组件上混合使用<script setup>和（参见文档），这样您就可以使用常规脚本来公开 JSDoc。<script>

<script setup>
// component setup. Takes priority over the eventual `setup()` function of the export object in <script>.
</script>

<script>
/** This is my nice component documentation */
export default {
  name: 'MyComponent',
}
</script>