Add DOM.Iterable to your tsconfig.json to resolve the TypeScript error "Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator"
While working with TypeScript and FileList you may get the TypeScript error
Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator.
The error message is being displayed because TypeScript, by default, is unaware of the Iterable DOM elements. One such iterable object is
FileList. This indicates that although the
FileList in the console appears to be an object, it is actually an iterable. This implies that we may utilize iterator methods on these iterables, such as
for...of statement or spread operator
Solution to the error
Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator
You may fix the issue by opening your
tsconfig.json file and adding
DOM.Iterable to the
lib array, which informs TypeScript about the types of DOM iterables, including FileList.
Iterable definitions are added to several DOM APIs via
dom.iterable. If you’re working in a runtime environment that has DOM APIs, you will need DOM definitions. If your runtime environment supports iterable methods on other DOM APIs, you would also include
dom.iterable. When using a runtime environment that supports iterable methods on the DOM APIs that allow them, including DOM by itself will result in type errors when attempting to use those iterable methods. It is not possible to include
dom.iterable by itself since it expands the dom definitions.