Types Deep Dive 10 exercises

Exploring HTML Attribute and Element Types

Let's shift our focus to HTML elements and attributes and how React knows what is available for each element.

Here are several questions for you to explore with help from the index.d.ts file:

Question 1: HTML Attributes

First off, how does React know which HTML attributes can be passed to ea

Loading exercise


00:00 Now, we've been looking at some crazy stuff. We're looking at declaration merging, at the global scope. Let's get down to brass tacks now and let's look at the HTML attributes that come with each element here. And I'm going to ask you some questions here or you're going to try and figure out these questions. How does React know which HTML attributes can be

00:19 passed to which HTML element and on which interfaces and types are they stored? So for instance, this div here, how does TypeScript know, or React know, what can this receive here? We know that it's on jsx.intrinsic elements, but actually what

00:37 div-specific stuff is there or is there no div-specific stuff? What actual interface describes what the div can take there? Now, here too, this class name prop here, where does this class name prop actually go? What interface does it lead you to? And finally,

00:55 this href prop down the bottom here, where does this lead you to? What interface does that take you to? So your job is to really try to figure out if you have an anchor tag here, what actually decides what's possible to put on that anchor tag? Same with the div, same with audio, video, things

01:13 like that. So some interesting questions here. Good luck.