Unexpected behavior with conditional type when using with object destructuring

[deebov]

Getting weird behavior with conditional types when using them with object destructuring. I think the code explains better than words in this situation. Please, go to the playground

TypeScript Version: 4.0.3

Search Terms: object destructuring, conditional object destructuring

Code

type Props =
  | {
    direction: "horizontal" | "vertical";
    onChange: (value: number) => void;
  }
  | {
    direction: "both";
    onChange: ({ x, y }: { x: number; y: number }) => void;
  };


const notWorking = ({ onChange, direction }: Props) => {
  if (direction === 'horizontal') {
    onChange(2)
  }

  if (direction === 'both') {
    onChange({ x: 8, y: 4 })
  }
}

const notWorking2 = (props: Props) => {
  const onChange = props.onChange
  const direction = props.direction
  
  if (direction === 'horizontal') {
    onChange(2)
  }

  if (direction === 'both') {
    onChange({ x: 8, y: 4 })
  }
}

const working = (props: Props) => {
  if (props.direction === 'horizontal') {
    props.onChange(3)
  }

  if (props.direction === 'both') {
    props.onChange({ x: 8, y: 4 })
  }
}

Expected behavior:

Actual behavior:

Playground Link: playground link

Related Issues: -

[MartinJohns]

Duplicate of #12184.

And on a side-note: There is no "conditional type" in your example. You're having a discriminated union type.

[RyanCavanaugh]

Thanks as usual @MartinJohns

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.