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

Inizia riproducendo l’esempio TSX fornito con TypeScript 3.7.4 e confronta i casi di spread con le soluzioni alternative che usano proprietà esplicite. Traccia quindi l’analisi del flusso di controllo del compilatore per gli object spread JSX, poi aggiungi una copertura di regressione che dimostri che la proprietà verificata viene trattata come non nullish attraverso lo spread.