Preview the project, open dev tools, and you can see your updated message.
Testing code in the console
As mentioned previously, a great feature of the console is that you can also try out code snippets - you can type in code and see it run immediately. This is a very handy way to try things out. At the bottom of the list of messages in the console should be an input field where you can enter some code.
However when you type code directly in to the browser, you can only write JavaScript code. Let's quickly cover why this is.
How TypeScript works
Browsers don't actually have built-in support for TypeScript - they can only directly run JavaScript. When you write TypeScript code and then want to run it, a special program called the TypeScript compiler (or tsc for short) converts - or "compiles" - your TypeScript code to JavaScript. Remember that TypeScript is an extension to JavaScript that adds types. Compiling TypeScript to JavaScript pretty much involves just deleting type annotations. We haven't covered those yet, but in short it means deleting the bits that TypeScript adds to JavaScript, and so the JavaScript output of your TypeScript code will look very similar.
Construct has a built-in version of the TypeScript compiler, and it automatically converts your TypeScript code to JavaScript for you, so you don't have to worry about that. Then the browser will run the resulting JavaScript code. However if you type code directly in to the browser, such as in the console, the browser does not support TypeScript nor does it run the TypeScript compiler, and so you can only enter JavaScript code.
We haven't actually covered anything specific to TypeScript in this guide yet - the console logging code snippet happens to be identical between JavaScript and TypeScript, and many more snippets also happen to be identical. This is just something to bear in mind and we'll explain more about the difference between TypeScript and JavaScript later on.
Back to the console
So bearing in mind the console only supports JavaScript, let's turn our attention back to it. Try typing 1 + 1 and press Enter. It will instantly run this as JavaScript code and log the result.
You can also try entering the console log code inside the console, and see it print the message there.
You can enter JavaScript code in to the console this way at any time and immediately see the result - or an error if you entered something incorrectly. As mentioned you cannot enter TypeScript code here, but it's still very useful for exploring things like the library of built-in functions that browsers provide. This makes it a great way to quickly experiment with lots of different variations of code. Do feel free to try it out at any point during this guide and play with different code samples - it's a great way to learn more.
Conclusion
In this part we've covered:
- About this guide, and what you'll learn in this series
- How to add some TypeScript code in an event sheet in Construct
- Using
console.log() to add a message to the browser console
- How to open the browser developer tools and view the console
- How to enter code in the console to quickly try it out - bearing in mind that browsers only directly support JavaScript, not TypeScript.
This guide will often use the browser console for logging the results of code, and it provides an excellent place to experiment with code, so it's worth the time to get familiar with it.
You can download a Construct project file for this part of the guide here: