typescript - 可选的链接运算符奇怪的行为

Question

我在 TypeScript (v4.6.2) 中遇到了一些奇怪的行为。为什么 (a) 有效而 (b) 和 (c) 无效？

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

Answer 1

考虑以下几点:

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[]
}

参见:

• type assertions在TS手册中

• optional chaining (?.) operator在 MDN 上

• nullish coalescing (??) operator在 MDN 上