Optional chaining operator weird behaviour

Issue

I am experiencing some weird behaviour in TypeScript (v4.6.2). Why does (a) work but (b) and (c) don't?

const a: string[] | null = []
if (a?.length > 1) {
    console.log(1)
}

const b = [] as (string[] | null)
if (b?.length > 1) {
    console.log(1)
}

const c: string[] | null = [] as (string[] | null)
if (c?.length > 1) {
    console.log(1)
}

TypeScript playground

Solution

Consider the following:

TS Playground

const a: string[] | null = []
a // string[]
// TS has narrowed this to the array type in the union
// because you assigned an array to the variable after the type annotation

if (a?.length > 1) { // ok
  console.log(1)
}

const b = [] as (string[] | null)
b // string[] | null
// You asserted that the array could be null,
// so it is now possibly null in the type system

if (b?.length > 1) {
//  ~~~~~~~~~
// Object is possibly 'undefined'.(2532)
// TS won't allow comparison of a number to undefined
  console.log(1)
}

const c: string[] | null = [] as (string[] | null)
c // string[] | null
// Another case of assertion

if (c?.length > 1) {
//  ~~~~~~~~~
// Object is possibly 'undefined'.(2532)
// TS won't allow comparison of a number to undefined
  console.log(1)
}

// I suggest one of these patterns instead:
declare const maybeNullMaybeArray: string[] | null;

if ((maybeNullMaybeArray?.length ?? 0) > 1) {
  //                             ^^^^
  // Use nullish coalescing operator to evaluate the expression to 0
  // in the case that it is nullish, so that the comparison will
  // always be between two numbers

  maybeNullMaybeArray // string[] | null
  // but the type is still not narrowed, because the true condition
  // could have resulted from the evaluation to the literal zero
  // instead of a value from the `length` property on the variable
  // so, alternatively:
}

if (maybeNullMaybeArray && (maybeNullMaybeArray.length > 1)) {
  //                        ^^^^^^^^^^^^^^^^^^^^^^^^^^
  // The array definitely exists at this point
  // so if we got this far, we can use it as an array:

  maybeNullMaybeArray // string[]
}

See:

• type assertions in the TS handbook

• optional chaining (?.) operator on MDN

• nullish coalescing (??) operator on MDN

Answered By - jsejcksn