Why does Typescript flag a possible undefined value on array length check with greater than but not equals?

Question

Given this snippet of a React component:

const AccountInformation = (props: { readonly accountData: AccountData | undefined | null }) => {
  const hasMultipleAccounts: boolean = props.accountData?.customerAccounts?.length === 1 ? false : true
...

Why does Typescript complain that props.accountData?.customerAccounts?.length is possibly undefined when I check if it is greater than 0 (> 0) but the error goes away when I check if it is equal to 1 (=== 1)?

Is this a case where JS is doing something weird with an undefined property being interpreted as 0?

Writing it this way eliminates the error, but I'm trying to understand the behavior.

  const hasMultipleAccounts: boolean = props.accountData?.customerAccounts?.length ?? 0 > 1 ? : true : false

undefined > 1 is a lot more likely to be an error.

VLAZ
– VLAZ

2022-03-03 16:40:08 +00:00
Commented Mar 3, 2022 at 16:40 — VLAZ
– VLAZ, Commented Mar 3, 2022 at 16:40

beautifulcoder · Accepted Answer · 2022-03-03 16:52:47Z

5

If you want to use length > 0 you'll need null coalescing:

const i: number | undefined = undefined;

if (i ?? 0 > 0) {
}

answered Mar 3, 2022 at 16:52

beautifulcoder

11.4k3 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2022-03-03 16:51:02Z

More simply, you're asking why TypeScript complains about the second of these statements:

console.log(undefined === 1);   // false
console.log(undefined > 0);
//          ^−−−− Object is possibly 'undefined'.(2532)

...because any property access operation with optional chaining in it has undefined as one of its possible result values.

=== is more general than > is. === is used to see if the type of value of the operands match. But > is used to either compare two numbers or to compare two strings for relative "greater"-ness. TypeScript also prevents mixing those two:

console.log("1" > 0);
//          ^−−− Operator '>' cannot be applied to types 'string' and 'number'.(2365)
console.log(1 > "0"");
//          ^−−− Operator '>' cannot be applied to types 'number' and 'string'.(2365)

In JavaScript, we're (fairly) used to implicit conversion in these situations, but TypeScript's job is to apply strict typing, and so implicit conversion is generally not allowed. In JavaScript, undefined > 0 becomes NaN > 0 which is false (as is undefined <= 0). But TypeScript sees that as the error it likely is, and flags it up for you.

(Playground link for all of the above.)

Collectives™ on Stack Overflow

Why does Typescript flag a possible undefined value on array length check with greater than but not equals?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related