Optional component props in the Options Api are described in .d.ts not correct

[ivanmem]

Describe the bug

The plugin does not take into account that "error" is an optional parameter.

Component.vue:

props: {
 error: String as PropType<string>,
},

Like now:

Component.vue.d.ts:

 error: PropType<string>;

It should be:

Component.vue.d.ts:

 error?: PropType<string>;

Reproduction

I'll create it later if anyone needs it.

Steps to reproduce

No response

System Info

"vue": "3.3.2",
"vite": "4.3.5",
"vite-plugin-dts": "2.3.0",

Validations

• [X] Read the FAQ.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[qmhc]

Vue props default optional if without required.

[ivanmem]

@qmhc even if you specify required: false - the plugin still does not take this into account.

[qmhc]

It's unnecessary, Vue (Volar) will infer the definition of props, and will know which porp is required.

[ivanmem]

@qmhc webstorm Volar appeared only in beta version.

[qmhc]

Currently plugin using Volar as drive (in v3), I think we should wait Volar update. Because Volar finally will slove this solution and we shouldn't work repeatedly.

[StevenTew]

If it helps, I see the same issue with optional React prop types

My .jsx file has the following defined:

const MessageBox = ({
    center,
    children,
    icon,
    onDismiss,
    size,
    tone,
    ...rest
}) => { ... };

MessageBox.defaultProps = {
    center: false,
    children: null,
    icon: null,
    onDismiss: null,
    size: null,
    tone: null,
};

MessageBox.propTypes = {
    /** Center the content horizontally */
    center: PropTypes.bool,

    /** React elements for display inside MessageBox */
    children: PropTypes.node,

    /** A single ui-icon component */
    icon: PropTypes.element,

    /** Your callback function for the MessageBox close button */
    onDismiss: PropTypes.func,

    /** Controls spacing, text and icon size */
    size: PropTypes.oneOf(['large', 'tiny']),

    /** Controls the contextual tone */
    tone: PropTypes.oneOf([
        'neutral',
        'info',
        'success',
        'critical',
        'promote',
    ]),
};

The generated definition file is this (optional props are not listed as optional):

export default MessageBox;
declare function MessageBox({ center, children, icon, onDismiss, size, tone, ...rest }: {
    [x: string]: any;
    center: any;
    children: any;
    icon: any;
    onDismiss: any;
    size: any;
    tone: any;
}): import("react/jsx-runtime").JSX.Element | null;
declare namespace MessageBox {
    namespace defaultProps {
        const center: boolean;
        const children: null;
        const icon: null;
        const onDismiss: null;
        const size: null;
        const tone: null;
    }
    namespace propTypes {
        const center_1: PropTypes.Requireable<boolean>;
        export { center_1 as center };
        const children_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        export { children_1 as children };
        const icon_1: PropTypes.Requireable<PropTypes.ReactElementLike>;
        export { icon_1 as icon };
        const onDismiss_1: PropTypes.Requireable<(...args: any[]) => any>;
        export { onDismiss_1 as onDismiss };
        const size_1: PropTypes.Requireable<string>;
        export { size_1 as size };
        const tone_1: PropTypes.Requireable<string>;
        export { tone_1 as tone };
    }
}
import PropTypes from 'prop-types';