Configuring TypeScript for DOM Iteration
TypeScript was giving us an error since it does not recognize elements as an iterable object.
By default, TypeScript incorporates certain libraries in its compilation context. However, to make DOM nodes iterable, we need to explicitly include DOM.Iterable in the lib option:
{ "comp
Transcript
00:00 Okay, the way to fix this, if we go back to source, is to fix it by making sure that dom.iterable is included in lib. So we need es2022, we need the dom, but we also need some extra
00:14 typings to ensure that dom nodes are iterable. And let's take a look now. We go back to our code and bam, it's now just working. This is fantastic. And the reason this is working is because of dom.iterable. So if we look inside lib.dom.d.ts, you'll see there's another
00:32 file called lib.dom.iterable.d.ts. And what this does is it adds a bunch of global interfaces which add symbol.iterator, and I think the one we need was nodeListOf. Yeah, here we go, nodeListOf. And you can see it's adding a symbol.iterator here. So I'm not sure why
00:51 this is in a different kind of like thing, a different lib to dom. I assume because it was added later and they didn't want to change the dom default types. If you don't specify lib as well, then it will actually by default include dom.iterable, which is pretty nice.
01:09 But I kind of like to be specific about this stuff, and you'll sort of see why when we talk about node. But using this, es2022, dom, dom.iterable, this should be your default for all web projects.
