迹忆客 专注技术分享

当我们尝试使用带有可能未定义的值的扩展语法时，会发生“Type 'undefined' must have a Symbol.iterator method that returns an iterator”错误。 要解决此错误，需要在使用 spread 之前使用类型保护来验证该值是否为 undefined。

下面是错误发生的一个示例。

type Years = number[] | undefined;

const arr1: Years = undefined;

// ⛔️ Error: Type 'undefined' must have a
// '[Symbol.iterator]()' method that returns an iterator.ts(2488)
const result = [...arr1];

arr1 变量可能具有未定义的值。

当我们使用问号将属性标记为可选时，通常会发生此错误。

当一个值是可选的时，它可能等于未定义。

由于我们不能使用未定义值的扩展语法 (...)，因此我们可以提供空数组作为默认值。

type Years = number[] | undefined;

const arr1: Years = Math.random() > 0.5 ? [2022, 2023] : undefined;

const result = [...(arr1 || [])];

console.log(result);

我们使用逻辑 OR (||) 运算符来提供备用，以防 arr1 变量存储未定义的值。

现在我们可以保证将扩展语法与数组一起使用。

我们也可以使用三元运算符来获得相同的结果。

type Years = number[] | undefined;

const arr1: Years = Math.random() > 0.5 ? [2022, 2023] : undefined;

const result = [...(arr1 !== undefined ? arr1 : [])];

console.log(result);

我们使用三元运算符来检查 arr1 是否不存储未定义的值。

如果不是，我们传递 arr1 数组，否则提供一个空数组的后备值。

使用逻辑 OR (||) 运算符和这个三元之间的区别是 - 三元更明确，直接检查 undefined。

如果左边的值是假的，则逻辑 OR (||) 运算符返回右边的值。

我们还可以在初始化变量时提供默认值。

type Years = number[] | undefined;

const arr1: Years = undefined || []; // 空数组作为默认值

const result = [...arr1];

console.log(result);

我们在初始化 arr1 变量时提供了一个空数组的默认值。

这样，TypeScript 可以确保变量将存储一个数组，并且可以安全地将其解压缩到结果数组中。