Types Deep Dive 10 exercises

Updating the Global Namespace for an Additional Attribute

The first step for declaration merging is to use declare global with the React namespace:

declare global {
namespace React {

Over in the React types, it looks like there are a couple different choices to try.


Let's try DOMAttributes:

Loading solution


00:00 We're back on this DeclareGlobal. We definitely need that. We definitely need to use namespace react. Now it's a case of which interface do we use in order to add this solution test ID to it. We know that the base for a lot of this stuff, so it's going to be HTML attributes,

00:17 which extends ARIA attributes and DOM attributes. We could, if we wanted to, put it on DOM attributes or ARIA attributes. Let's try DOM attributes first, so interface, DOM attributes, and let's just pull this out. But this is erroring here. Why would this be erring? All declarations of DOM attributes

00:37 must have identical type parameters. And we can see that DOM attributes actually takes in a T here. So when you do like a global override like this, we need to make sure that we're getting the type parameters exactly the same. So this T, even if it's unused, it actually does contribute. So we need to make sure it's there.

00:54 Now, we can have solution test ID, and we'll make it optional, and we'll make it a string here. So this ends up working. And this now means we have all of the DOM attributes that we need pulled in. Though this, I wouldn't say it's particularly perfect because I think, I mean, there's three different ways of doing this, basically,

01:14 where we can have HTML attributes as the one we target as well. And HTML attributes, if I spell this wrong, by the way, just so you see, HTML attributes, it doesn't work because we've actually like missed out on the spelling here. And so the declaration merge doesn't work, but this one does work. HTML attributes ends up working.

01:33 Lovely, lovely, lovely. And we've also got ARIA attributes as well. So ARIA attributes, is that spelled correctly? Must have identical type parameters. So I think we just remove this one because ARIA attributes itself doesn't actually take in a type parameter here. There we go. So now this works too.

01:52 I always recommend using HTML attributes though. It just seems to make sense to me. And this means that like now this will be passed through into the DOM itself and we can strike this out with like Puppeteer or something similar. So this is really, really cool. And it means that we've kind of put all of the bits of information that we needed together,

02:11 where we now can walk through the hierarchy of different interfaces inside React. We understand like how the namespace is constructed. And now whenever we get any errors that come up around this, we'll know where to go. And that's what I want you to take from this section. Thank you.