Learn TypeScript in Construct, part 6: Functions

UpvoteUpvote 7 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

267 visits, 321 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 9 Jul, 2025. Last updated 31 Jul, 2025

This is part 6 of the tutorial series Learn TypeScript in Construct. This part continues on from part 5. So in case you missed it, see Learn TypeScript in Construct, part 5: More about types.

In this part we'll move on to using script files rather than a script block in an event sheet. This will demonstrate how to use script files in Construct, and script files also provide a more convenient place to write longer pieces of code.

Using a script file

Let's start over for this part. Close your existing project if you have one open, and create a new empty project in Construct again.

In the Project Bar, right click the Scripts folder and click Add TypeScript.

Adding a script file to a project

This will add a new script file to your project. A code editor will open that uses the full middle view, as we're no longer involving an event sheet.

The first script file Construct adds has some default code which is intended to help make it easy to integrate your code with Construct. However we won't need this. So select all the code and delete it. You should now see an empty code editor.

Previously we used TypeScript code in place of an action in an event sheet. This meant it ran the code whenever the event block ran, such as in On start of layout or when a button was clicked. Now we're using script files, all the top-level code will all run automatically immediately upon the page loading. This is actually before Construct has even started running the project, but for the purposes of this guide that doesn't matter.

You can check this works by entering our first line of code again in the script file:

console.log("Hello world!");

Preview the project and check the browser console, and you'll see the message appear.

We've now moved to using a script file. So from now on, the code samples in this guide should be entered in to the code editor for the script file.

Functions

Functions are another essential part of all computer programming. A function is essentially a group of statements that you can re-use in multiple places. They are also a good way to make sure code is well-organised with different functions for each of the key tasks of your program.

Declaring a function

In TypeScript a function can be declared like this:

function logMessage()
{
	console.log("Hello world!");
}

This creates a function named logMessage, which will log Hello world! to the console. By itself, this code does not actually do anything. It's just declared that the function is there, but nothing actually uses it yet.

Calling a function

To run the statements inside the function, we need to call the function. This is done using its name followed by parenthesis (). Try this code snippet, which adds a call to the function.

// Declare function
function logMessage()
{
	console.log("Hello world!");
}

// Call the function
logMessage();

Now this will log Hello world! to the console, since we have both declared the function (describing what it does), and called it (which actually runs it).

This function can be called in multiple places, which saves having to repeat all the code inside the function everywhere. This might seem like a small saving in this case, but real programs can have long and complicated functions, making it a much bigger saving.

Parameters

Functions can also be passed parameters, which are additional values that can be used by the function body. These go in between the parenthesis (), separated by commas. Our previous code using () really means "no parameters". Much like with variables, parameters must also specify a type after a colon. However parameters don't use the let keyword. The following code declares a function that uses two parameters, both requiring a number, to display in a log message. It then calls that function twice with different parameter values.

// Declare function with two parameters, both numbers
function logNumbers(firstNumber: number, secondNumber: number)
{
	console.log(`The first number is ${firstNumber} and the second number is ${secondNumber}`);
}

// Call the function twice with different parameters
logNumbers(3, 4);
logNumbers(6, 7);

This will log two messages:

  • The first number is 3 and the second number is 4
  • The first number is 6 and the second number is 7

Notice how the values passed in the call, such as 3 and 4 in logNumbers(3, 4), are passed to the corresponding parameters firstNumber and secondNumber in the function logNumbers. Then it runs the code inside the function using the provided values.

Inside the function logNumbers the parameters firstNumber and secondNumber are essentially variables, but don't need to be declared with let - the name alone is all that is needed when declaring function parameters.

As you might expect, TypeScript enforces that the values passed match the type required by the function parameters. If you try calling the function with strings, e.g. logNumbers("hello", "world");, TypeScript will mark it as an error. It is also an error to pass either too few parameters (e.g. logNumbers()) or too many (e.g. logNumbers(3, 4, 5)). This helps make sure your code is correct, as TypeScript will only allow you to call functions with the correct parameters and types.

Optional parameters

It's common for a function to provide optional parameters using the special notation ?:. These must be at the end of the list of parameters, so all the required parameters come first. Then when you call the function, you have the option of omitting the optional parameters. If you omit an optional parameter, it has the value undefined inside the function.

The function below demonstrates optional parameters. The first two parameters are required, and the third is optional, because it is declared with thirdNumber?: number rather than thirdNumber: number. Inside the body of the function, it acts as if it has the type number | undefined, because it could be either of those types. You can check whether it was specified using typeof.

function logNumbers(firstNumber: number, secondNumber: number, thirdNumber?: number)
{
	console.log(`The first number is ${firstNumber} and the second number is ${secondNumber}`);

	if (typeof thirdNumber === "number")
		console.log(`...and the third number is ${thirdNumber}`);
}

// Can pass either two or three numbers
logNumbers(3, 4);
logNumbers(6, 7, 8);

Next Tutorial In Course

Learn TypeScript in Construct, part 7: More on functions 16:05

Covers more details about functions in TypeScript, including function expressions, recursion, arrow functions and closures.

  • 0 Comments

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