Types Deep Dive 10 exercises

Modify Existing Interfaces in the Global React Namespace

Declaration merging can be used to modify existing interfaces in the global namespace.

Consider the following interface:

declare global {
namespace React {
interface MyAwesomeInterface {
foo: string;

If we wanted to add a property to the interface, the ea

Loading exercise


00:00 we can use something called declaration merging in TypeScript to actually change stuff in the global namespace that's already there. So I don't want you to change this code whatsoever, right? The really easy way to solve this exercise is just to add bar string up onto this interface, right? This means that this will work down here.

00:19 But we now have a global inside the namespace React on an interface of my awesome interface. And what I'd like you to do is I'd like you just to kind of like modify that, but with a separate declaration below this comment here. And the idea of what you're trying to do

00:37 is you're trying to make it also have a bar string on it. That's your goal. So this, again, we're in the sort of like abstract here, but I just want you to see if you can figure this out using the clues here and using this link here that might help too. Good luck.