total-typescript / ts-reset

A 'CSS reset' for TypeScript, improving types for common JavaScript API's

Home Page:https://www.totaltypescript.com/ts-reset

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature Request: `Boolean()` behaviour vs `!!` operator

hubastard opened this issue · comments

Boolean() constructor does not behave like the !! operator. Boolean is useful in react conditional rendering when checking for an optional string to avoid rendering issues.

When we use !! typescript understands that the value cannot be optional/falsy anymore.

For example:

<>
  {!!label && <Text>{label.toUpperCase()}</Text>}
</>

But when you use Boolean() typescript still thinks that the value can be optional/falsy. Which forces you to unwrap the value using ! or add ?.

For example:

<>
  {Boolean(label) && <Text>{label!.toUpperCase()}</Text>}
  {Boolean(label) && <Text>{label?.toUpperCase()}</Text>}
</>

This declaration seems to work well for me.

interface BooleanConstructor {
  new (value?: any): Boolean;
  <T>(value?: T): value is TSReset.NonFalsy<T>;
  readonly prototype: Boolean;
}