Learn TypeScript in Construct, part 8: Objects

UpvoteUpvote 3 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

133 visits, 154 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 11 Jul, 2025.

The global object

In part 5 we noted how variables at the "top level" (not inside any braces) are scoped to the file, and so can't be referenced by other script files.

What if you do want to have a value stored globally that can even be used in other script files? TypeScript provides a global object, which you can refer to with globalThis, that is always available everywhere. Then if you add a property on the global object, it will be accessible by all scripts.

One complication with doing this in TypeScript is you can't declare the type of a property on the global object the usual way (like you do with let). Also remember that TypeScript only lets you access object properties it knows exist - it won't let you just assign any property to the global object without first knowing it's allowed. Therefore you have to specifically tell TypeScript that you want to add a global variable with a specific type using a special declare global statement. The code below demonstrates this.

// Declare the type of the global property.
// Note this uses 'var' instead of 'let'.
declare global {
	var myGlobal: string;
}

// Add a property on the global object.
globalThis.myGlobal = "Hello world!";

// Logs "Hello world!".
// This will also work in other script files,
// as the global object is available everywhere.
console.log(globalThis.myGlobal);

In older code you may see window or self to refer to the global object. These are just other names for the same thing.

In TypeScript, the global object also has a special feature: if you refer to a variable name that doesn't exist anywhere in scope, it will also check the global object for that name. If it is found, it uses that property.

declare global {
	var myGlobal: string;
}

// Add a global property named myGlobal
globalThis.myGlobal = "Initial string";

// Assign myGlobal as if it's a variable
myGlobal = "Hello world!";

// Log myGlobal as if it's a variable
console.log(myGlobal);	// Hello world!

However if the name doesn't exist anywhere in scope and also does not exist on the global object, it causes an error. (This helps you catch typos, as a mis-typed name should result in an error.)

// Error: cannot find name 'doesNotExist'.
console.log(doesNotExist);

Note you cannot create a global property without globalThis. You must create global properties by assigning to a property of globalThis, and only then can you access it like a global variable. The following will cause an error if myGlobal was not already created as a property of globalThis.

declare global {
	var myGlobal: string;
}

// ReferenceError: myGlobal is not defined
myGlobal = "Hello world!";

Note that this particular error only occurs when you preview the project. TypeScript's type checker doesn't know that it isn't assigned anywhere else, so it can't mark this as an error in this particular case.

Built-in globals

TypeScript provides quite a few built-in features that can be reached via the global object. In fact we've been using one of these all along: the console object is a property of the global object. It could also be accessed via globalThis, such as:

globalThis.console.log("Hello world!");

However as the console object is guaranteed to always exist on the global object, the globalThis part can be omitted, which is what we've been doing in our code samples. TypeScript also comes with built-in type definitions that cover all these built-in features, so it knows they exist and can type check them properly, even though you didn't write any type declarations for them.

Back in part 3 we used String(...) and Number(...) to convert between strings and numbers - these are also globals and could also be accessed by globalThis.String(...). But once again there's no need as these are built-in.

There are a wide range of globals built-in to TypeScript (most of which are inherited from JavaScript). You can depend on these anywhere you write TypeScript code. There are many more added by browsers, providing a wide range of sophisticated features ranging from networking to accessing peripheral devices like cameras. Other environments such as node.js also add different sets of features. Tools like Construct also provide their own set of features. These sets of features are collectively referred to as Application Programming Interfaces, or APIs. We've covered a very small number so far. Later on this guide will cover several more features that are built-in to TypeScript and so will work everywhere you can write TypeScript, as well as a few browser APIs, and some of the APIs specific to Construct.

Conclusion

In this part we've covered:

  • Creating an object
  • Accessing object properties
  • The types used for objects
  • Using strings to refer to object properties
  • Nesting objects
  • How objects are passed by reference, whereas numbers and strings are passed by value
  • Using the global object via globalThis

There's more to cover about objects, since they're such a fundamental aspect of TypeScript programming. In particular using function properties on objects has some additional unique features. The next part will cover that and some more details about objects in TypeScript.

Learn more

If you want to dig deeper, you can learn more about the features mentioned in this guide at the following links:

  • 0 Comments

Want to leave a comment? Login or Register an account!