Me gustaría saber si es posible extender un tipo dependiendo del valor de otro tipo.
interface NavType { hideNav?: boolean dev?: boolean } Me gustaría permitir el uso de hideNav solo si el dev arg es falso.
const Navbar: React.FC<NavType> = ({ children, hideNav, dev = false }) => ( <nav> {!dev ? ( <NavDefault hideNav={!!hideNav}>{children}</NavDefault> ) : ( <NavDev>{children}</NavDev> )} </nav> )¿Cómo puedo usar condicionales en este caso?
// Should PASS const navArgs1: NavType = { hideNav: undefined, dev: true } const navArgs2: NavType = { hideNav: true or false, dev: false } // Should NOT PASS const navArgs3: NavType = { hideNav: true or false, dev: true }Puede definir 2 tipos y dejar que las propiedades del componente sean su unión; en principio lo siguiente (mostrado como código TS Playground ):
interface NavBase { dev: boolean; } interface DevNavType extends NavBase { dev: true; hideNav?: undefined; } interface NotDevNavType extends NavBase { dev: false; hideNav: boolean; } // This simulates your component function f(x: DevNavType | NotDevNavType) { } f({ dev: true }); // Works f({ dev: true, hideNav: undefined }); // Also works f({ dev: false, hideNav: true }); // Works too - for any boolean value of hideNav f({ dev: false }); // Compiler error f({ dev: true, hideNav: true }); // Compiler errorNotas:
NavBasetype NavType = DevNavType | NotDevNavType