类型对象必须有一个返回迭代器的 Symbol.iterator 方法

当我们尝试使用扩展语法 (…) 解包数组中的对象时，会出现错误“Type Object must have a Symbol.iterator method that returns an iterator”。

要解决该错误，请将您的对象包装在一个数组中或更正您的输入。

下面是错误如何发生的示例。

索引.ts


const obj = { name: 'Bobby Hadz' };

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

我们尝试使用扩展语法将对象的属性直接解包到数组中。

将对象包装在数组中

解决方案取决于您的用例。

如果要将对象解包到数组中，请在使用扩展语法 (…)之前将其包装在数组中
。

索引.ts


const obj = { name: 'Bobby Hadz' };

const result = [...[obj]];

console.log(result); // 👉️ [{name: 'Bobby Hadz'}]

合并多个对象

如果要
合并多个对象的属性，请改用带有对象包装器的扩展语法。

索引.ts


const obj = { name: 'Bobby Hadz' };

const result = { ...obj, ...{ age: 30 } };

console.log(result); // 👉️ {name: 'Bobby Hadz', age: 30}

合并多个对象数组

如果您试图
将一个对象数组解包到另一个数组中，您的输入可能是错误的。

例如，您可以将对象数组键入为对象。

以下是您将如何键入一个对象
和一个对象数组。

索引.ts


type Person = { name: string; age: number };

type ArrayOfPeople = Person[];

这是错误的更直观的表示。

索引.ts


// ⛔️ Error: Type '{}' must have a '[Symbol.iterator]()'
// method that returns an iterator.ts(2488)
console.log([...{}]);

如果您的用例是将多个对象数组合并到另一个数组中，您应该这样做。

索引.ts


const arr1 = [{ name: 'Bobby Hadz' }];
const arr2 = [{ name: 'Alice' }];

const result = [...arr1, ...arr2];

// 👇️ [{name: 'Bobby Hadz'}, {name: 'Alice'}]
console.log(result);

现在我们可以安全地将两个对象数组的元素解包到数组中了
result。

类型 ‘undefined’ 必须有一个返回迭代器的 Symbol.iterator 方法

“Type ‘undefined’ must have a ‘Symbol.iterator’ method that returns an iterator”错误发生在我们尝试使用具有可能是undefined.

undefined
要解决该错误，请在使用传播语法之前使用类型保护来验证该值不是。

下面是错误如何发生的示例。

索引.ts


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变量可能有一个undefined值。

当您

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

当一个值是可选的时，它可以等于undefined。

我已经写了一篇关于
如何使可选属性成为必需属性的详细指南。

提供空数组的回退

由于我们不能将
扩展语法 (…)
与undefined值一起使用，因此我们可以提供一个空数组的回退。

索引.ts


type Years = number[] | undefined;

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

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

console.log(result);

我们使用逻辑 OR (||) 运算符在变量存储值的情况下提供回退。 arr1undefined

现在我们可以保证对数组使用扩展语法，所以 TypeScript 很高兴。

使用三元运算符解决错误

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

索引.ts


type Years = number[] | undefined;

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

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

console.log(result);

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

如果没有，我们展开数组arr1，否则，我们提供空数组的回退。

使用逻辑 OR (||) 运算符与此三元的区别在于，三元更明确并直接检查undefined.

使用逻辑或（||）运算符解决错误

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

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

索引.ts


type Years = number[] | undefined;

const arr1: Years = undefined || []; // 👈️ default value empty arr

const result = [...arr1];

console.log(result);

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

通过这种方式，TypeScript 确保变量将存储一个数组，并且可以安全地将其解压缩到result数组中。

使用 nullish coalescing (??) 运算符解决错误

您还可以使用 nullish 合并 (??) 运算符来解决错误。

索引.ts


type Years = number[] | undefined;

const arr1: Years = undefined ?? []; // 👈️ default value empty arr

const result = [...arr1];

console.log(result);

如果空合并运算符 (??)左侧的值

等于nullor undefined，则返回右侧的值，否则返回运算符左侧的值。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：

目录

Type Object must have a Symbol.iterator method that returns an iterator