Learn TypeScript in Construct, part 5: More about types

UpvoteUpvote 4 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

143 visits, 189 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 27 Jun, 2025.

Initialization

If you declare a variable with the any or unknown type but don't assign anything, its initial value is undefined.

// Note no value is assigned
let value: unknown;

// This logs: undefined
console.log(value);

This is also true of any type that is allowed to hold undefined.

// Note no value is assigned
let value: string | undefined;

// This logs: undefined
console.log(value);

If you try to do this with another type like a string, TypeScript will mark it as an error. This is because it's not allowed to hold undefined and you should have assigned it a value that matches its type before using it.

let value: string;

// Error: variable 'value' is used before being assigned
console.log(value);

This is however useful if you want to initialize a variable with an if statement. Suppose you want to initialize a string to either "left" or "right" randomly. Here we're going to introduce a new snippet of code: Math.random() - we'll explain more about why it's written like that later on, but for now all you need to know is it returns a random fractional number between 0 and 1. Therefore it's 50% likely to be under 0.5, and 50% likely to be over 0.5.

let direction: string;

if (Math.random() < 0.5)
{
	direction = "left";
}
else
{
	direction = "right";
}

// Will log either "left" or "right" randomly
console.log(direction);

In the corresponding JavaScript code, the way this works is direction actually holds the value undefined until it is assigned something else. So it is actually similar to the previous examples - every unassigned variable starts as undefined. However TypeScript stops you from using it when it knows it's unassigned to help make sure your code is correct - otherwise you might have got undefined when you were expecting another type.

One more thing to mention is TypeScript is clever enough to know if there is any case you didn't assign the correct value to a variable. For example this code will produce an error:

let direction: string;

if (Math.random() < 0.5)
{
	direction = "left";
}

console.log(direction);

The reason is when logging direction, it is randomly either a string, or left unassigned (with the default undefined value). In this case you'll still get an error that direction is used before being assigned, because it's not always assigned. In other words, TypeScript knows that not every possible route through the program assigns to the variable before it is used.

It's worth noting that later on we'll come across cases where it's useful to leave a typed variable unassigned. In Construct it is particularly useful to declare a variable that will store an object instance, but not assign it until the layout starts and the object is created. TypeScript allows such cases, even though there is a period of time the variable is left as undefined. This is because the benefits outweigh the costs - it's very convenient and generally isn't a problem.

Conclusion

In this part we've covered:

  • Union types
  • Type narrowing
  • Literal types
  • Type aliases
  • The special any and unknown types
  • The special undefined and null values
  • Some more details about initializing variables

This section was quite theoretical. You may be keen to write some more useful code samples! However what we covered here is fundamental to the workings of TypeScript, so it was important to take a bit of a detour to cover it. Now you know these essential details about TypeScript, we're ready to move on to our next important programming concept: functions!

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!