如何使用 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。

它是一个编译器语法糖，用于导出设置函数，因此您显然不能注释由编译器“生成”的函数。

如果你真的需要 JSDoc，你应该使用常规的 <script> 和 export default defineComponent :)

<script>
import { defineComponent } from 'vue'

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

也适用于经典对象定义：

<script>
import { defineComponent } from 'vue'

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

编辑：正如@EstusFlask 在评论中提到的，您可以在 SFC 组件上混合使用 <script setup> 和 <script>（参见 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>

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

How to use JSDoc to document a Vue component with script setup?

jsdoc

typescript

vue.js

vue-composition-api