Types You Don't Control 12 exercises

Modifying TypeScript Global Scope

Consider a global DEBUG that's attached to the window object, allowing us to call getState on it:

import { Equal, Expect } from "@total-typescript/helpers";
const state = window.DEBUG.getState(); // red squiggly line under DEBUG
type test = Expect<Equal<typeof state, { id: string }

Loading exercise


00:00 We know now that in lib.dom.d.ts you can find a bunch of different interfaces that help describe what the DOM does. But what if the DOM works a little bit differently for us? Let's say that we have a global attached to window called debug.

00:17 We've seen this exercise before in various different forms. And window.debug we're going to basically call getState on it. And state instead of being typed as any, which it is now, it should be an object with id string on it.

00:31 But currently we're getting an error saying property debug does not exist on type window and type of global this. So your job is to try to make a global alteration to window. And if we take a look at window you'll see that it is an interface.

00:49 Where is it? There it is. There is an interface window in global scope. You remember how to access global scope and how to declare interfaces in a global scope. And you remember way, way back we talked about that if you have two interfaces with the same name in the same scope

01:07 they will declaration merge. So it makes sense that if we can get an interface into the global scope with the same name as the window interface we'll be able to add a property to it. I recommend using a declaration file for this. And I think that's everything. Good luck.