Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-tsc: JSDoc comments not emitted when using type-only defineProps macro #3645

Closed
Jak-Ch-ll opened this issue Oct 9, 2023 · 0 comments
Closed
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first

Comments

@Jak-Ch-ll
Copy link

Problem

When generating declaration files for Vue components with vue-tsc --declaration --emitDeclarationOnly no JSDoc Comments are emitted when using type-only defineProps.

I found a few issues regarding JSDoc and defineProps, but most of them deal with default values (such as #2398). And non does describe this issue.

Example

Consider the following component:

<script setup lang="ts">
defineProps<{
  /**
   * This is an example prop
   */
  foo?: string;
}>();
</script>

<template>Hello {{ foo }}</template>

The following Example.vue.d.ts file is emitted with the comment missing:

declare const _default: import("vue").DefineComponent<{
    foo: {
        type: import("vue").PropType<string>;
    };
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    foo: {
        type: import("vue").PropType<string>;
    };
}>>, {}, {}>;
export default _default;

I would expect the JSDoc comment to be included in the resulting *.vue.d.ts file, but that is not the case.

Runtime syntax works

When using the runtime syntax, the comment is emitted as expected:

<script setup lang="ts">
defineProps({
  /**
   * This is an example prop
   */
  foo: {
    type: String,
  },
});
</script>

<template>Hello {{ foo }}</template>

Resulting d.ts:

declare const _default: import("vue").DefineComponent<{
    /**
     * This is an example prop
     */
    foo: {
        type: StringConstructor;
        default: string;
    };
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * This is an example prop
     */
    foo: {
        type: StringConstructor;
        default: string;
    };
}>>, {
    foo: string;
}, {}>;
export default _default;

Final notes

When using the component within the same project, the hover documentation does correctly display in both cases, so it seems to only affect the emitted declaration files.

@xiaoxiangmoe xiaoxiangmoe added bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first labels Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first
Projects
None yet
Development

No branches or pull requests

2 participants