Optional types should be narrowed when checked with the Boolean function

[equal-matt]

Suggestion

🔍 Search Terms

boolean narrow optional control "if(Boolean("

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

When using the Boolean function to check if an optional object property is present, this should narrow the type of the checked property.

📃 Motivating Example

type Obj = {
    foo?: string;
}
const obj: Obj = {
    foo: "bar"
}

if (obj.foo) {
    obj.foo.toLowerCase();
    // ^? (property) foo?: string
}

if (Boolean(obj.foo)) {
    obj.foo.toLowerCase();
    // ^?  (property) foo?: string | undefined
    // Error!
}

💻 Use Cases

The pattern of controlling "if this is present, do X, else do Y" is one of the basics of dealing with optional properties.

Consider the ubiquity of the following code in React applications:

type Props = { foo?: string };
const Component = ({ foo }: Props) => (
  <div>
    <span>My thing:</span>
    {foo && <span>{foo.toLowerCase()}</span>}
  </div>
)

Using the &&, ?, || or other symbols for narrowing types whilst controlling flow is terse, but often less readable. This is even more true for people new to javascript. Using the Boolean function makes the syntax makes this more explicit. From personal anecdotal experience, it's been a preferred style for a number of teams.

[MartinJohns]

Another duplicate of #16655.

[fatcerberus]

Using ... symbols for narrowing types whilst controlling flow is terse, but often less readable. This is even more true for people new to javascript.

People like to say this, but IMO if (!!obj.foo) strikes me as much clearer in intent to someone unfamiliar with the language than if (Boolean(obj.foo)). For the former I can infer that !! implies some kind of existence check, while the latter requires me to understand upfront the rules for boolean coercion in JS. It's not immediately obvious that it's checking for non-nullish values.

[equal-matt]

Thanks @MartinJohns - closing this one.