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

admin管理员组

文章数量:1405601

Given this snippet of a React ponent:

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

Why does Typescript plain 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

Given this snippet of a React ponent:

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

Why does Typescript plain 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

• javascript
• reactjs
• typescript

Share Improve this question Follow asked Mar 3, 2022 at 16:37 Brian M.Brian M. 4711 silver badge66 bronze badges 1

• 2 undefined > 1 is a lot more likely to be an error. – VLAZ Commented Mar 3, 2022 at 16:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

const i: number | undefined = undefined;

if (i ?? 0 > 0) {
}

More simply, you're asking why TypeScript plains 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 pare two numbers or to pare 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 bees 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.)

本文标签：