Typescript 4.8.4: Different type inference on two if branches with (fundamentally) identical input

[HynekS]

Bug Report

🔎 Search Terms

🕗 Version & Regression Information

• This changed between versions 4.7.4 and 4.8.4

⏯ Playground Link

Playground link with relevant code

💻 Code

import {
  Children,
  cloneElement,
  ReactElement,
  isValidElement,
} from "react";

type TestProps = {
  className?: string;
} & JSX.IntrinsicElements["div"];

export const Test = ({
  children,
}: TestProps) => {
  return (
    <div>
      {Children.map(children, (element) => {
        if (isValidElement(element) && Math.random() > 0.5) {
          const props = element.props || {};
          return cloneElement(element as ReactElement, {
            ...props,
            className: `someClassName ${props.className}`,
          });
        }
        if (isValidElement(element) && Math.random() < 0.5) {
          const props = element.props || {};
          return cloneElement(element as ReactElement, {
            ...props,
            className: `someClassName ${props.className}`,
          });
        }
        return element;
      })}
    </div>
  );
};

🙁 Actual behavior

The two if branches give different TS output (type inference & errors) with the same input (fundamentally same input; if identical input was used, the branching would not make sense. Demonstrating with Math.random()).

This behavior first appears in the TS playground in version 4.8.4. My project, where I ran into this issue, is also on v4.8.4. It seems to work as expected in earlier version 4.7.4.

🙂 Expected behavior

The inferred types and errors will be identical in both branches with (fundamentally) identical input.

[RyanCavanaugh]

Duplicate of #52232

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