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

Beginne damit, das bereitgestellte TSX-Beispiel mit TypeScript 3.7.4 zu reproduzieren und die Spread-Fälle mit den Workarounds für explizite Eigenschaften zu vergleichen. Verfolge anschließend die Kontrollflussanalyse des Compilers für JSX-Object-Spreads und füge eine Regressionstestabdeckung hinzu, die zeigt, dass die geprüfte Eigenschaft über den Spread hinweg als nicht nullish behandelt wird.