tengo un componente:
type Base = { color: string } type Button = { to: string } & Base type Link = { link: string linkNewTab: boolean } & Base type ComponentProps = Button | Link export const Button: React.FC<ComponentProps> = (props) => { return (<> {props.link ? <Link newTab={props.linkNewTab}>...</Link> : props.to && <Button>...</Button>} </>) }Error de mecanografiado:
Property 'link' does not exist on type 'PropsWithChildren<ComponentProps>'. Property 'link' does not exist on type '{ to: string; } & Base & { children?: ReactNode; }'.ts(2339)Lo que no quiero:
Información: 4.5.4 TypeScript Version
Puede verificar si la propiedad de link existe utilizando el operador in . Esto reducirá el tipo sin acceder a la propiedad, por lo que TypeScript lo permitirá:
<> {"link" in props ? ( <Link newTab={props.linkNewTab}>...</Link> ) : ( "to" in props && <Button>...</Button> )} </>El problema es que está intentando acceder a un valor en una propiedad que podría no existir. En su lugar, puede verificar si esa propiedad existe en el objeto (usando el operador in ) antes de intentar acceder a su valor. Esto también discriminará al sindicato:
// instead of this: if (props.link) {} // ^^^^ // Property 'link' does not exist on type 'Button | Link'. // Property 'link' does not exist on type 'Button'.(2339) // prop in obj if ('link' in props) { props.color // ok props.link // ok props.linkNewTab // ok } else { props.color // ok props.to // ok }