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

まず、提供された TSX の例を TypeScript 3.7.4 で再現し、spread のケースと明示的なプロパティを使った回避策を比較します。次に、JSX の object spread に対するコンパイラーの制御フロー解析を追跡し、その後、チェック済みのプロパティが spread を経ても non-nullish として扱われることを示す回帰カバレッジを追加します。