Utiliser l'opérateur d'étalement sur NodeList en Typescript

Question

Je voudrais utiliser l'opérateur d'étalement ES6 pour convertir une NodeList en Array. Mon projet utilise TypeScript et une erreur se produit.

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

Voici l'erreur qui se produit, erreur TS2461 : Le type 'NodeListOf' n'est pas un type de tableau.

Ce code est possible dans Babel. Est-il possible en TypeScript ou dois-je utiliser une autre méthode telle que Object.keys() ?

Answer 1

Syntaxe d'étalement est utilisé avec les itérables, qui NodeListOf est. [...document.querySelectorAll('...')] est valide en ES6 (tant que les itérables DOM sont supportés par le navigateur ou polyfillies).

Le problème est spécifique à TypeScript qui ne suit pas strictement les spécifications ES avec une cible ES5 et inférieure. La syntaxe d'étalement est limitée aux tableaux par défaut, et

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

est transposé en

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

Il en résultera une erreur, et le système de type émet une erreur à la compilation.

Une façon de procéder est d'utiliser Array.from (peut être polyfilled dans l'environnement ES5) pour convertir un itérable en tableau :

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

Une autre solution consiste à activer downlevelIteration option de compilation . Il oblige TypeScript 2.3 et supérieur à traiter les itérables selon les spécifications ES avec la cible ES5 et inférieure :

Fournir un support complet pour les itérables dans for..of, spread et destructuring en ciblant ES5 ou ES3.

DOM.Iterable doit être spécifié dans lib option du compilateur pour inclure les typages appropriés. Puisque les itérateurs DOM nécessitent le support du navigateur, ils peuvent être polychargés dans les anciens navigateurs avec l'option core-js .