A problem with type checking in if statement.

[Arfey]

TypeScript Version: 3.4.2

Search Terms:
A problem with type checking in if statement.

Code

{({ loading, data, error }) => {
    const canShow =
      !loading &&
      !error &&
      data &&
      data.recommendedPrice &&
      data.recommendedPrice.price;
    if (canShow) {
      return (
        <RecommendedPrice
          price={data.recommendedPrice.price}
          isActive={isActive}
        />
      );
    }

    return null;
}}

Expected behavior:
all is fine

Actual behavior:

object is possibly 'null'

But when i write something like that all is fine

{({ loading, data, error }) => {
    if (
      !loading &&
      !error &&
      data &&
      data.recommendedPrice &&
      data.recommendedPrice.price
    ) {
      return (
        <RecommendedPrice
          price={data.recommendedPrice.price}
          isActive={isActive}
        />
      );
    }

    return null;
}}

[ahejlsberg]

Duplicate of #12184.

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.