What is wrong with this union type in this react component props?

Question

I'm trying to create a Grid component that can be a container or a item. To achieve this, I can add a prop container: boolean . But I also want to add more types when container is true.

interface ExtendedProps {
    cols?: Areas
    rows?: Areas
    gap?: Spacing
}

Then add these types

type GridProps = {
    container?: false;
    children: ReactNode;
};

type ContainerProps = Omit<GridProps, 'container'> & ExtendedProps & {
  container: true;
};

But when I type the props, typescript gives me an error:

export default function Grid({
    container,
    children,
    gap, // Property 'gap' does not exist on type 'GridProps | ContainerProps'.
    cols, // Property 'cols' does not exist on type 'GridProps | ContainerProps'.
    rows, // Property 'rows' does not exist on type 'GridProps | ContainerProps'.
}: ContainerProps | GridProps) {
    // ...
}

Why does this happen?

For some reason, when I create an object with type GridProps | ContainerPropsGridProps | ContainerProps I get the intended behaviour:

const testObject: ContainerProps | GridProps = {
    children: <div />,
    container: false,
    gap: 2 // error: not assignable
}

const anotherTestObject: ContainerProps | GridProps = {
    children: <div />,
    container: true,
    gap: 2
}

You can see this live here .

Answer 1

This is the expected behaviour. If container was false the other field would not exist

You can get the other fields by checking the container first

export default function Grid(props: ContainerProps | GridProps) {
  if (props.container) {
    const {
      container,
      children,
      gap,
      cols,
      rows
    } = props

  }
  return <div></div>;
}