[英]Preview Typescript literal types on React props using VSCode
I've got this literal type:我有这种文字类型:
type ModalSize = 'small' | 'medium' | 'large';
and I use it for a React component prop.我将它用于 React 组件道具。
However, the preview I got when the mouse hovers it with VSCode is this:但是,当鼠标悬停在 VSCode 上时,我得到的预览是这样的:
Is there a way to see the literal type, with its values ( small
, medium
, large
), in the preview, instead of size?: ModalSize
?有没有办法在预览中查看文字类型及其值(
small
、 medium
、 large
)而不是size?: ModalSize
?
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?
并将其提取为具有
NonNullable
的类型,以确保您不会因为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!如果你想在其他需要这些精确值的函数中使用该类型,你可以导出它,如果它是在你的组件之外完成的!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.