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

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 | 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.

CodePudding user response：

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