.png)
7 hours ago
2
This works correctly if you pass the function numbers, but JavaScript doesn't enforce that. You could write code that accidentally passes strings, objects, or anything else as parameters, and JavaScript will just run the code anyway, likely producing an incorrect result.
Here's a TypeScript example of the same function.
The only difference is adding : number to the parameters. These are type annotations and mean these parameters are required to be numbers. TypeScript then enforces that requirement. If you pass it anything that isn't a number, it marks it as an error in the editor.
That means it's clear your code needs fixing before you even preview the project. This can make it much easier and quicker to get your code right.
TypeScript compiles to JavaScript, which essentially means just deleting those type annotations. It will turn the example TypeScript function shown above back in to the JavaScript version, which is the same, just without the type annotations. That also means you can expect the same outstanding performance as JavaScript!
How does it work in Construct?
In Construct you can now add TypeScript files in event sheets and in the Project Bar, and start coding with TypeScript right away!
Adding TypeScript code as an action in an event sheet
When writing TypeScript code in the Construct editor, you don't need to worry about having .js files. Construct automatically compiles your TypeScript code to JavaScript for you behind the scenes. This makes the workflow simpler and keeps your project tidy.
You can still use an external editor if you want - but it's much quicker to get started with TypeScript coding in the Construct editor, as you don't need the additional steps like installing node.js and TypeScript, and setting up an external editor workflow. The built-in support also works for single-file (.c3p) projects.
Why use TypeScript?
Our previous blog post covering TypeScript support with an external editor covers this in detail. We'll repeat one key point though: the extra information TypeScript adds allows for precise autocomplete. As JavaScript is a dynamic language, autocomplete can't identify what type objects are, as it could depend on runtime details. Therefore JavaScript code editors tend to guess what should appear in the autocomplete list.
JavaScript autocomplete in Construct, where it has to guess what should appear in the autocomplete list.
Notice in the autocomplete list above irrelevant suggestions like Math and OnMouseDown are included as guesses, and many valid suggestions are omitted, including the method we want named Move.
Using TypeScript, the type system means it can identify the exact list of every available property and method, and no others. This helps make sure you get your code right, avoid typos, and is also helpful for exploring available features.
TypeScript autocomplete in Construct, with a precise list of suggestions based on type information.
Another benefit of TypeScript we want to highlight here is to catch errors. Beginners writing JavaScript code often make mistakes like the one below: Player is a Sprite object and they want to set its X position to 100.
However this code is incorrect. Player is an object type, and it could have multiple instances. You need to specify which instance you want to move. Suppose you're happy to just move the first (and perhaps only) instance. The correct code is this:
The incorrect version of the code won't be marked as an error though - it's valid JavaScript syntax, and so it's allowed. Worse, when you run the project, no error is logged, so you don't get any information about what went wrong. This is because although no property x exists on Player, JavaScript allows adding new properties by just assigning them like that. So the code accidentally adds a new (but meaningless) property x on the player's object type.
TypeScript however knows to mark the incorrect version of the code as an error.
This is because Construct provides type definitions for everything, and TypeScript uses that to check your code. There is no property x on the Player object type, and so it's marked as an error. Better still, precise autocomplete means when you type runtime.objects.Player. you'll see a reliable list of everything you can use - and this shows the method getFirstInstance(), helping guide you to the correct code.
For these reasons, we think TypeScript is likely a better fit for beginners learning to write code for the first time. TypeScript's ability to catch potentially confusing errors for you before you even preview the project is a valuable learning tool. We also think TypeScript is a better fit for large projects with a lot of code, where the type checking and autocomplete benefits become increasingly valuable. However the choice of JavaScript or TypeScript is up to you - Construct's support for JavaScript isn't going anywhere!
Switching to TypeScript (and back)
To help make it easy to update an existing JavaScript project to TypeScript, Construct also provides an option to automatically switch the project language. You can find this by right-clicking the Scripts folder in the Project Bar.
Note this option essentially just renames all your .js files to .ts, and similarly switches the language of any scripts in event sheets, without affecting their content. You'll still need to manually add type annotations to all your existing code - and we have advice on that in this guide - but this option can help save time when switching.
You can also switch individual script blocks in event sheets to TypeScript. This makes it easier to experiment with the difference between them for smaller code snippets.
You can also switch from TypeScript back to JavaScript if you decide you prefer to stick with JavaScript - but again you'll need to manually update your code to remove type annotations.
More features
Our new Monaco-based code editor provides lots of additional extra tools like Go to definition, Find references and more. These work even better with TypeScript: much like with autocomplete, the static type system of TypeScript provides precise information allowing exact results, when in some cases these tools will have to make guesses with JavaScript code. See the linked blog post for more information on those features.
Construct allows importing TypeScript definition files with the extension .d.ts. These just specify types for TypeScript's code validation, and don't actually result in any JavaScript code. You can use these to declare things like custom global variables or APIs for external services you want to interact with.
You can also interoperate JavaScript and TypeScript code - for example you can import a JavaScript module from TypeScript code. This relies on TypeScript's interoperability, being able to deduce types where it can, but note not all TypeScript features may be available when you do this. It may work better if you provide TypeScript definition files for your JavaScript code.
Documentation
We're keen to make sure there is equal documentation and examples for both TypeScript and JavaScript in Construct. The scripting section of the manual now covers both JavaScript and TypeScript, and includes some TypeScript-specific advice in the new section on TypeScript in Construct. For people who already know TypeScript, we've got the Construct for TypeScript developers quick-start guide. And for complete beginners, we're in the process of writing the Learn TypeScript in Construct tutorial series - the TypeScript equivalent of our popular Learn JavaScript in Construct series.
In Construct's Example Browser there's a new Coding section where you can filter examples by JavaScript, TypeScript, or event sheets only. We've added 44 TypeScript examples to help you get started. Many of these are existing JavaScript examples adapted to TypeScript, which means you can also use them as a reference of the same code in JavaScript and TypeScript. For example check out Spell Caster in TypeScript, compare to Spell Caster in JavaScript, and with this particular example, you can also see the event sheet version.
We're also working on some video content to help you get started with TypeScript - stay tuned for updates on our YouTube channel!
There's also tons of resources for TypeScript on the official website - check out the official TypeScript docs and The TypeScript Handbook for plenty more.
Conclusion
Adding built-in support for TypeScript is our biggest upgrade to Construct's coding capabilities since we added JavaScript coding back in 2019! TypeScript has many features that make it desirable for beginners and experienced users alike. Much like JavaScript, TypeScript is also one of the most popular programming languages in the world. Construct's unique ability to add snippets of code to event sheets makes it especially easy to get started, and its tools to switch language help you try out both languages and understand the differences between them.
With Construct we're sticking to these industry-standard programming languages as they have far more comprehensive features and far better performance than tool-specific languages, as we noted when comparing JavaScript to GameMaker Language (GML). Most tools with their own custom programming languages experience similar pitfalls, often having feature request trackers full of people asking for industry-standard programming language features that have been available in languages like JavaScript and TypeScript for years. It also means you're directly learning real-world skills used all over the industry, with a wide range of jobs available, so it could help you with your next step in a programming career!
Alongside our new Monaco-based code editor Construct now has professional-grade coding capabilities. We aim to ensure TypeScript is equal to JavaScript in Construct's support for it, including covering documentation, tutorials, examples and videos. We still have a little work to do on that front, but rest assured it's on its way, and there's also plenty to check out already, including dozens of examples.
We think TypeScript is probably a better option for coding in Construct, but if you still prefer JavaScript, don't worry - support is not going away! We're still going to fully support JavaScript coding. Finally if you're not interested in coding and prefer to stick to event sheets, fear not - after working hard to develop TypeScript support, we're turning our attention back to Construct's other features now, including Construct Game Services and a new Asset Browser in the latest beta releases, and much, much more to come! As ever, keep an eye on our releases page to keep track of everything new, and browse all the other new features and new additions we've been adding. It's really too much to list here! And if you like, give TypeScript coding a try, and happy coding!
