javascript - TypeScript:如何在字符串数组上使用 Array.includes 可能未定义的值(可选链接)

Question

考虑这个例子:

type SomeType = {
  paymentData?: {
    paymentMethod?: string;
  }
}

const someObj: SomeType = {};

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentData?.paymentMethod);

这在 TypeScript 中不起作用，因为它将数组元素的类型推断为 string，因此它要求与 includes 函数一起使用的值也是 of类型 string，但是 someObj.paymentData?.paymentMethod 可能是未定义的，也就是类型是 string |未定义。我不能使用非空断言运算符 (!)，因为它不能在可选链接之后使用。

在 JavaScript 方面，如果 includes 检查 undefined 是完全没问题的，只是 TypeScript 对此不满意。在这里满足 TypeScript 的好方法是什么？

Answer 1

一种方法是将数组转换为string | 的数组。未定义。这可能是我的首选方式，因为它不会在转译后的 JavaScript 代码中留下任何痕迹。它还可以防止您不小心检查例如一个实际上没有意义的 number。

const someTest = (['creditCard', 'payPal'] as (string | undefined)[]).includes(someObj.paymentData?.paymentMethod);

虽然 TypeScript 代码有点冗长，所以还有两个选项:

预先检查是否定义了 someObj.paymentData?.paymentMethod:

const someTest = !!someObj.paymentData?.paymentMethod && ['creditCard', 'payPal'].includes(someObj.paymentData.paymentMethod);

在 undefined 的情况下使用 nullish 合并运算符 (??) 回退到空字符串，以确保该值始终是一个字符串:

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentData?.paymentMethod ?? '');

为了进一步引用，这里是 GitHub 上关于输入 Array.includes 函数的相关主题:https://github.com/microsoft/TypeScript/issues/26255