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

Commencez par reproduire l’exemple TSX fourni avec TypeScript 3.7.4 et comparez les cas de spread avec les solutions de contournement utilisant des propriétés explicites. Suivez ensuite l’analyse du flux de contrôle du compilateur pour les object spreads JSX, puis ajoutez une couverture de régression montrant que la propriété vérifiée est traitée comme non nullish à travers le spread.