如何使用JSDOC使用脚本设置来记录VUE组件？

Question

我正在建立一个带有打字稿的VUE库。我想像普通功能一样导出组件的文档。

以前我们会这样做：

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

<template></template>

但是现在使用脚本设置：

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

<template></template>

我们如何记录组件？

Answer 1

使用＆lt;脚本设置＆gt; 您不能在组件导出上使用jsdoc。

这是一种编译器的语法糖，可以消除设置功能的导出，因此您显然无法评论编译器“生成”的函数。

如果您确实需要JSDOC，则应使用默认导出的常规＆lt; script＆gt; ：:)

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

还可以使用Typescript decarecomponent wrapper 包装器：

<script>
import { defineComponent } from 'vue'

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

edit：edit：如@estusflask提到：在评论中，您可以在sfc组件上同时混合＆lt; scipt设置＆gt; 和＆lt; script＆gt; （请参阅 docs ）
因此，您可以使用常规脚本揭露JSDOC。

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

Answer 2

我没有声誉可以评论 https://stackoverflow.com/a/a/72003725/18059097 ，但是看来您甚至不需要将任何内容都放在默认导出中，因此您可以简单地

<script>
/**
 * This is my well documented component
 */
export default {};
</script>
<script setup>
// your code
</script

使用此样式也可以是有利的，以便您可以使用编辑器的“转到参考”功能，尽管它有点一个愚蠢的解决方法。

另一个稍有不同的想法是创建一个单独的文件 index.js ，并且

import { default as MyComponentVue } from './MyComponent.vue';

/**
 * This is my well documented component.
 */
export const MyComponent = MyComponentVue;

当然是文档中的缺点。