Tengo un componente, toma argumentos como:
interface Props { label: string; children?: React.ReactNode; withoutActions?: boolean; fieldKey?: KeyProperties; corporate: Corporate; }Un formulario utiliza las acciones sin acciones y la clave de campo. Si la prop withActions es verdadera , entonces no debería haber una clave de campo proporcionada.
Sin embargo, si my withoutActions no está definido , entonces debo hacer que mi fieldLabel sea del tipo **KeyProperties** que es una lista específica de valores disponibles para él.
Si withoutActions no está definido, el otro NO DEBE definirse en absoluto. Si withoutActions es verdadero, el otro DEBE definirse respetando el tipo específico de keyProperties.
¿Cómo puedo implementar eso?
No entendí completamente su requisito, pero usaría un alias de tipo en lugar de una interfaz. Por ejemplo, algo como esto:
type Props = { label: string, children?: React.ReactNode, withoutActions: true, corporate: Corporate } | { label: string, children?: React.ReactNode, withoutActions: undefined, fieldKey: KeyProperties, corporate: Corporate }Similar a la otra respuesta, pero puede refactorizarla un poco para que sea más limpia. No especificó cuál es el comportamiento esperado si withoutActions es false en lugar de true o undefined . Aquí, asumo que el comportamiento de false e undefined es el mismo. Si false no es un tipo válido, ¿podría cambiar withoutActions?: false por withoutActions: undefined como la otra respuesta.
type Props = { label: string; children?: React.ReactNode; corporate: Corporate; } & ( { withoutActions: true; } | { withoutActions?: false; fieldKey: KeyProperties; } )Sin embargo, aquí hay una trampa importante que debe tener en cuenta. Debido a la tipificación estructural de TypeScript, solo obtiene un exceso de verificación de propiedades cuando está asignando directamente un objeto literal. No obtiene una verificación de propiedad excesiva cuando asigna un objeto como un tipo inferido. TypeScript y React tratan las declaraciones de accesorios directos como si fueran objetos literales, y realizarán una verificación de propiedad excesiva como parece desear. Sin embargo, en algunos casos, si asigna objetos a variables y deja que se infiera su tipo, es posible que TypeScript no advierta que hay una propiedad en exceso presente.
Mira esta demostración basada en tu ejemplo original . Los ejemplos n.° 1 y n.° 2 generarán un error debido al exceso de verificación de propiedades, pero el ejemplo n.° 3 no.
const ExampleOne = () => { // Type error - excess property checking return <Component label={''} corporate={''} withoutActions fieldKey={''} />; } const ExampleTwo = () => { const props: Props = { label: '', corporate: '', withoutActions: true, // Type error - excess property checking fieldKey: '', } return <Component {...props} />; } const ExampleThree = () => { const props = { label: '', corporate: '', withoutActions: true, fieldKey: '', } // No type error - no excess property checking return <Component {...props} />; }