Control flow doesn't affect spreaded properties

TypeScript Version: 3.7.4

Search Terms: react required props

Code

import React from 'react'

type Props = {
  foo?: string
}

const Example = (props: Props) => (
  <>
    {/* [bug?] Throws an error about required prop, despite null check */}
    {props.foo && <Component {...props} />}


    {/* Shows an error, as expected, because lack of null-check  */}
    <Component {...{ ...props, foo: props.foo }} />

    {/* Workaround 1: No error */}
    {props.foo && <Component {...{ ...props, foo: props.foo }} />}


    {/* Shows an error, as expected, because lack of null-check  */}
    <Component {...props} foo={props.foo} />

    {/* Workaround 2: No error */}
    {props.foo && <Component {...props} foo={props.foo} />}
  </>
)

const Component = ({ foo }: Required<Props>) => <p>{foo}</p>

export default Example

Expected behavior:

TypeScript would detect that we're inside a null check, and treat the checked property as non-nullish.

Actual behavior:

TypeScript doesn't notice that the checked property is non-null, because it's inside an object spread.

As a workaround, the null-check will still work if the property is explicitly added to the spread object (workaround 1) or explicitly passed as a prop (workaround 2).

Start by reproducing the provided TSX example with TypeScript 3.7.4 and compare the spread cases with the explicit-property workarounds. Trace the compiler's control-flow analysis for JSX object spreads, then add regression coverage showing that the checked property is treated as non-nullish through the spread.