Types Deep Dive 10 exercises

Exploring JSX.IntrinsicElements

Let's move on to exploring JSX.IntrinsicElements, which is another global interface that you'll see in TypeScript and React.

export type Example = JSX.IntrinsicElements;

In VS Code on your local machine, you can cmd + click on IntrinsicElements to jump to the index.d.ts f

Loading exercise


00:00 In this exercise, we're going to look at JSX.IntrinsicElements, which is a really, really interesting interface which sits globally. And I would like you to basically just walk through each of these questions. So let me set them up. What is JSX.IntrinsicElements? Make sure you command click on IntrinsicElements below to go to its definition

00:18 and make sure you're going to the original definition in index.d.ts. What is the structure of IntrinsicElements when you're in there? What actually is going on there? What are the keys? What are the values in this object that you're seeing? And try editing the object itself

00:36 and you'll notice that the element below this error actually kind of like fixes its error there. You'll see an error is happening. It doesn't exist on type JSX.IntrinsicElements. And, you know, you definitely want to go and change that back because we don't want to actually be editing the index.d.ts file itself.

00:55 So go through that. See if you can figure out what is actually happening here and why this error is even occurring in the first place. Good luck.