Globals 4 exercises

Add a Function to the Global Scope

Before we continue the solution, it's important to note that there are types inside the global scope that affect what globals can be accessed.

In addition to being able to declare our own globals, this is also configurable from tsconfig.json inside of the lib config option. This allows specifyi

Loading solution


0:00 The way that we're going to build out this solution is we first use declare global. Inside a declare global scope here, this basically gives us access to the global scope that TypeScript can put things in. There are types inside the global scope that affects what globals you can access.

0:20 For instance, you will have access to document if, inside your tsconfig, you have DOM inside wherever it is. In fact, where is lib here? Lib is being expressed somewhere. Yeah, lib here. By default, lib is a config option that allows you to specify global libraries that sort of get bundled into the global scope here. This lib, by default it's this.

0:51 By default, it includes the DOM, but if you put it to this, then you notice that certain things are not going to be allowed. If we go to document, document is now not in scope. Try changing the lib compiler option to include DOM. When we do include that, then we end up with -- tsconfig.json -- a bunch of stuff being put in.

1:13 I'll stick DOM in there. Now, it's working. We have our document in the global scope. I'll look at that more in a future lesson, but this should give you a sense that there's stuff going on at the global level in TypeScript that I maybe wasn't aware of.

1:28 Inside this declare global scope, we can add things to this global scope. There's some funky syntax for adding functions here. You have to add it using the function keyword. We can say function, let's say it doesn't do anything, and we'll call it function mySolutionFunc. It returns a Boolean here.

1:48 You can't actually add the implementation here. If I go like const whatever equals this, it thinks you're like returning...Sorry, I can't do this at all. It looks like I'm able to implement something here, but const initializer in an ambient context -- this is an ambient context in this global area here -- must be either string or numeric literal. What?

2:11 You can't add the implementation here. What you can do is return a Boolean. You're typing the function as if it were a function overload. This function now works. We've got mySolutionFunc. We can call it. We get autocomplete for it too -- mySolutionFunc. Because it's a global, we don't even need to implement it here. It could be implemented in some library we're importing via CDN or something, so that's useful.

2:39 The other thing too is we've got this mySolutionVar. Now, if we try to do the same thing, if we try to do let mySolutionVar is going to be a number, for instance, weirdly, this doesn't work. With const it also doesn't work. Can we use declare const here? No, can't use declare inside here. What's the solution? To use var inside here, a bit of arcane syntax that TypeScript never changed.

3:03 The way to get something inside a declare global in an ambient context to pull throughout the entire app is to use var. Fine. We could also use var with mySolutionFunc I'm pretty sure. We'd go mySolutionFunc is this, which returns Boolean, which is perfectly fine too, but the function syntax is maybe more useful to know because you can express function overloads inside here.

3:26 Inside a declare global, you can add all sorts of stuff. You can add interfaces, so interface whatever. Then this interface, we can then say const yeah is Whatever and don't need to import it from anywhere. Crucially, too, we can then use this stuff in different files. If I go back to the problem file, then you'll see that mySolutionFunc is available here.

3:49 It doesn't respect file order or where this is declared. It just puts it into the global scope and lets you play with things. Of course, globals are bad. You maybe have use cases for using globals but, by default, you should be thinking globals are bad. But, if you can't avoid globals, and you have to type them, then this is the way to do it, by adding a declare global in there.

4:16 I'm going to show you various things inside this section that are going to show you how to put globals on different places, how to attach them to various things that you already know. This is going to be a cool section, really useful for understanding globals. If you have to work with them, this is how you type them.