Learn TypeScript in Construct, part 2: language basics

UpvoteUpvote 5 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

331 visits, 412 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 20 Jun, 2025.

JavaScript vs. TypeScript

As we've now covered types, it's a good time to talk a bit more about the difference between JavaScript and TypeScript.

Compiling TypeScript

We mentioned before that compiling TypeScript to JavaScript amounts to deleting type annotations. Let's show what that looks like in practice. Here's a TypeScript code sample we used earlier with a variable with an explicit type:

let message: string;
message = "Hello world!";
console.log(message);

When compiled to JavaScript, the code will look like this:

let message;
message = "Hello world!";
console.log(message);

All that has happened is the type for the variable message has been removed. That's pretty much it! Now you can see how closely related JavaScript and TypeScript are: the TypeScript compiler pretty much just deletes the types from your code, and then the result is JavaScript. It also shows why we can use the browser console for many code snippets, as so long as the code snippet doesn't use any type annotations, it's the same in JavaScript and TypeScript. Another way to put it is that TypeScript doesn't actually change how your code runs compared to JavaScript - it just adds types and uses them to check your code as you write it.

Static vs. dynamic typing

TypeScript is a statically typed language, which means variables have a specific type, and TypeScript enforces that (such as reporting an error if you assign a number to a variable declared to be type string). However JavaScript is a dynamically typed language, which means you can assign variables to a different type to the one they started with.

To illustrate this, consider this TypeScript code, which will report an error:

let foo: string;
foo = "string";  // OK: assigning a string
foo = 10;        // error: assigning a number

However the corresponding JavaScript code is allowed:

let foo;
foo = "string";  // OK
foo = 10;        // OK

JavaScript doesn't enforce types, and so you are allowed to do this. It might seem like JavaScript is more flexible because of this, but in practice this can be a headache, as it allows this even if it's a mistake. JavaScript will just carry on running your code with unexpected types and it may not fail until later on - and worse, it may fail in a strange way, such as producing the wrong result, or showing a confusing error message. TypeScript will report an error if you do this though, and Construct won't let you preview your project until you fix it. This can help make sure your code is correct and catch coding errors more quickly.

It's also worth mentioning other programming languages have different types for numbers, such as representing integers and floating point (fractional) numbers with separate data types. JavaScript does not distinguish these types though, and so neither does TypeScript. There's only one number type, which is a floating point number type.

Conclusion

In this part we've covered;

  • Statements
  • Comments
  • Variables and types
  • Assignment and constants
  • Numbers, strings and boolean data types
  • The typeof operator
  • How TypeScript and JavaScript are related

Hopefully by now you're getting familiar with entering code in both Construct and the browser console. The guide will continue to use both. In the next part, we'll learn more about operators, booleans, comparisons, and converting types.

Learn more

At the end of each part of this guide we'll include links to learn more about the various TypeScript and JavaScript features mentioned. We'll refer to the MDN Web Docs for JavaScript features which TypeScript merely inherits, or the official TypeScript website for TypeScript-specific features. You can skip over this and just carry on with the guide if you want, but if you're comfortable with what you've learned and want to dig deeper with a more complete reference or dig in to more advanced details, you can use these links to learn more.

  • 0 Comments

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