在Typescript中的NodeList上使用spread运算符

Question

我想使用ES6扩展运算符将NodeList转换为数组。我的项目使用TypeScript，它会抛出错误。

const slides = [...document.querySelectorAll('.review-item')];

以下是引发的错误，错误TS2461：类型'NodeListOf'不是数组类型

该代码在Babel中是可能的。是否可以在TypeScript中使用，还是需要使用其他方法，如Object.keys()？

Answer 1

Spread syntax用于NodeListOf的iterables。 [...document.querySelectorAll('...')]在ES6中有效（只要浏览器支持DOM迭代或polyfilled）。

问题是TypeScript特有的，它不严格遵循ES5目标和更低的ES规范。默认情况下，Spread语法仅限于数组，

[...document.querySelectorAll('...')];

被转换为

document.querySelectorAll('...').slice();

这将导致错误，并且类型系统在编译时会发出错误。

一种方法是使用Array.from（可以在ES5环境中进行polyfilled）将iterable转换为数组：

Array.from(document.querySelectorAll('...'));

另一种方法是启用downlevelIteration compiler option。它强制TypeScript 2.3及更高版本根据具有ES5目标和更低的ES规范来处理迭代：

  

在定位ES5或ES3时，为for..of，spread和destructuring中的iterables提供全面支持。

应在DOM.Iterable编译器选项中指定

lib以包含合适的类型。由于DOM迭代器需要浏览器支持，因此可以使用core-js在旧版浏览器中对它们进行填充。