I have a componenet:

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>}
    </>)
}

• There is a base type with props which both types have in common.
• The Component should either has Button or Link type based on the given props. But if it has Link, these props are preferred.

Typescript Error:

Property 'link' does not exist on type 'PropsWithChildren<ComponentProps>'.
  Property 'link' does not exist on type '{ to: string; } & Base & { children?: ReactNode; }'.ts(2339)

What I don't want:

• I can solve the problem by adding a type to the Base type and decide from their which props are allowed. I would like to automatically decide that based on props.

Information: 4.5.4 TypeScript Version

CodePudding user response：

You can check whether the link property exists by using the in operator. This will narrow down the type without accessing the property, and so typescript will allow it:

<>
  {"link" in props ? (
    <Link newTab={props.linkNewTab}>...</Link>
  ) : (
    "to" in props && <Button>...</Button>
  )}
</>

CodePudding user response：

The problem is that you are attempting to access a value at property which might not exist. Instead, you can check to see if that property exists in the object (by using the in operator) before trying to access its value. This will also discriminate the union:

TS Playground

// 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
}