00:00 Okay, let's check out GSX.IntrinsicElements, see what we're dealing with. Come on, click on this, and you'll see that we've got something here, which we'll have a look at later. But you can see that IntrinsicElements looks like this. This is a massive interface, and this massive interface basically describes all of

00:18 the things that are globally available to use as elements in React. All of this stuff, all of the SVG stuff down here, and all of the DOM stuff, these are things that are globally available for you to use. This means that we can use select, small, or source, span, strong, style, sub,

00:37 summary, sub, as elements here. And we can actually append to this if we want to. So if we go back here, go to IntrinsicElements and add a new one up here, let's say my new elements, and let's just leave it, I don't know, what should we make this type here? What should the type actually be?

00:55 Let's just leave it like this for now. The second question, or the third question, I can't remember, was what is the structure of this? Well, it's very obvious from the keys what's happening here. But what are the values of those keys? Well, each of these are detailed HTML props, HTML attributes, HTML elements, HTML elements. So that's an abbreviation.

01:14 You can see the anchor element has slightly different ones. Anchor HTML attributes, anchor HTML element, anchor HTML element. We can derive from this that if we take a look at HTML props, it's just literally a kind of like type helper here where we pass in the attributes and then we have class attributes and the E.

01:33 Let's go back there. And this HTML props, we're actually passing in some anchor HTML attributes. And these ones like download, href, sorry, href, I always say href for some reason, media, ping, target, type. These are things that are available on that element here.

01:53 So we can see that the keys are the elements that are available and here are the props that are available on those elements. So let's say that my new element takes in an ID, which is a string, and we'll go back here and we can see then that my new element, it's currently got foo on here,

02:10 but foo string is not assignable to type ID string. Let's actually copy the thing that I meant to copy before, whoopsie daisy. Yeah, there we go. So foo string, now it's going to work. And if I pass in a Boolean here, for instance, so just foo, Boolean is not assignable to type string. So this is really cool.

02:30 This gives us a sense for what Intrinsic Elements is doing because Intrinsic Elements tends to pop up in various guises when you're kind of like trying to maybe use an element that's not supposed to be there or it kind of, it comes up in all sorts of random errors throughout your application. I'm going to delete this before I forget because I will inevitably forget.

02:48 But jsx.intrinsic-elements, really, really key type that sits at the center of how you should think about React types.