sentencias condicionales - ¿Cómo puedo hacer que IntelliSense de TypeScript sugiera completaciones válidas en uniones discriminadas?

El objetivo es crear un componente de interfaz de usuario de casilla de verificación a partir de un diseño en Figma. Y según el diseño, la variante con contorno solo es compatible con el tamaño grande, pero la sólida es compatible con todos los tamaños.

Por lo tanto, estoy tratando de crear una interfaz donde ciertos proptypes dependan de la entrada del usuario en otras propiedades del mismo componente de React.

type ConditionalProps =
  | { variant: 'outlined'; size: 'large' }
  | { variant: 'solid'; size: 'small' | 'normal' | 'large' };

Esto es lo que he llegado hasta ahora. Y casi hace el trabajo. Cuando establezco la variante como outlined y el tamaño como pequeño, TypeScript da un error:

Type '{ variant: "outlined"; size: "normal"; }' is not assignable to type 'IntrinsicAttributes & ConditionalProps' 

Pero con lo que realmente no estoy conforme es con que IntelliSense sugiera usar el tipo 'small' | 'normal' | 'large' cuando la variante está configurada como outlined. Mira la imagen a continuación para ver a qué me refiero. Mi pregunta es si hay alguna manera de solucionar este problema, o si estoy usando el tipo condicional de manera incorrecta en este caso?

Respuesta #1

No hay manera en este momento de que solo aparezcan sugerencias válidas. El IntelliSense no restringe la unión (por así decirlo) en una unión discriminada como esta. Esta es una limitación conocida:

• Las finalizaciones de miembros del objeto se ofrecen desde todos los componentes de la unión incluso después de que la unión ha sido discriminada.
• La unión con una propiedad discriminatoria no distinta rompe la inferencia en cierta medida (mensajes de error confusos, IntelliSense inválido)

Parece que hubo un experimento para tal vez solucionar esto, pero nunca llegó a ninguna parte. Siéntete libre de abrir un problema en microsoft/TypeScript