Preview Typescript literal types on React props using VSCode

Question

I've got this literal type:

type ModalSize = 'small' | 'medium' | 'large';

and I use it for a React component prop.

However, the preview I got when the mouse hovers it with VSCode is this:

Is there a way to see the literal type, with its values (small, medium, large), in the preview, instead of size?: ModalSize?

Answer 1

You could add the literal type directly to your props like this:

type Props = {
    size?: 'small' | 'medium' | 'large';
}

and extract it as a type with NonNullable to make sure that you dont get the undefined option since size? could be undefined like this:

type ModalSize = NonNullable<Props["size"]>;

And you could export it if you want to use the type in other functions that need those exact values, if it is done outside your component!