Learn TypeScript in Construct, part 7: More on functions

UpvoteUpvote 3 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

190 visits, 224 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 10 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 6. So in case you missed it, see Learn TypeScript in Construct, part 6: Functions.

In this part we'll continue using a script file in a new Construct project. You can carry on with the same project as before, or create a new project and add a new script file again; either way delete all the code in the script file so you're starting with an empty file. In this part we'll cover more about functions. Since functions are such an essential part of programming, it's worth going in to some more detail about how they work and what you can do with them.

Function expressions

A function can also be used as an expression. In other words this means you can put function declarations in the same place as a number or string, such as assigning them to a variable, as shown below.

// Assign a function to a variable
let myFunc = function logMessage()
{
	console.log("Hello world!");
};

// Call the function held in the variable
myFunc();

When using a function this way, note it does not declare a function named logMessage, so calling logMessage() won't work. The only way to call the function is from the variable it was assigned to, i.e. myFunc(). In other words the function name isn't actually used here. In fact in this case the function name is optional, and so can be omitted like so.

// Function has name omitted
let myFunc = function()
{
	console.log("Hello world!");
};

myFunc();

When using typeof with a function, it will return the string "function".

let myFunc = function()
{
	console.log("Hello world!");
};

console.log(typeof myFunc);	// function

What type does TypeScript use to represent a function? If you hover the mouse cursor over myFunc in the code editor, you'll see it's inferred the type () => void. This notation means a function which takes no parameters that returns nothing. The () indicates the parameters, the => indicates it's a function, and as we covered in the previous part, void is the return type of a function that returns nothing. Note that => is composed of an equals character and a greater-than character, but in this context it has nothing to do with comparisons: the two characters are meant to look like a little arrow pointing to the right. Try not to mix it up with the less than or equal comparison operator <= - when dealing with functions, the arrow points right.

TypeScript's type checker prevents you calling something like a function if it's not really a function. For example if you try to call a number variable like it's a function, you'll get an error.

let myFunc = 5;		// not a function
myFunc();			// try to call it anyway
// Error: this expression is not callable

Why use functions in variables? It allows for flexibility in what you do with functions, such as having a variable that is re-assigned different functions depending on what you want to do. This also demonstrates the principle of a function expression, which comes useful in other cases, as we're about to see.

Callbacks

Just like how functions can be assigned to variables, functions can also be passed as parameters to other functions.

This can be confusing at first, but is an important part of programming. In particular it allows for a pattern named callbacks, where a function can do some work, and then call another function with the result of the work.

To introduce the idea, here's an example of a function calling another function.

// Declare a function that calls the function passed as its parameter
function logReturnValueOf(func: () => string)
{
	console.log(`The function provided returned: ${func()}`);
}

// Call the above function, and also give it a function to call
logReturnValueOf(function ()
{
	return "Hello world!";
});

This will log to the console the message: The function provided returned: Hello world!

Notice how we have a function call to logReturnValueOf(...), and the parameter in between the ( and ) is a function expression for a function that just returns the string "Hello world!". As function parameters must specify their type, we must specify a function that takes no parameters but returns a string, which is the type () => string. Then inside the logReturnValueOf function, it calls its parameter with func(), and adds the returned value to a log message.

The syntax with these uses of functions may take some time to get used to. In particular you can end up with lots of pairs of ( ), { and } across different lines. However you should notice Construct's code editor, like most other coding editors, can highlight bracket pairs to help you match them up.

Returning functions

Functions can also return other functions.

You may be beginning to notice that in general, anywhere you can use a string or a number, you can also use a function. This is a useful feature of TypeScript, and is sometimes referred to as first-class functions, as functions can be treated the same as any other data type.

Here's an example of a function returning a function.

// Declare a function that returns another function
function getFunction()
{
	return function()
	{
		console.log("Hello world!");
	};
}

// Call getFunction(), which returns a function
let returnedValue = getFunction();

// Call the returned function, logging "Hello world!"
returnedValue();

Note that TypeScript again infers the return type of getFunction from the return statement. Since it returns a function that takes no parameters and returns nothing, its return type is () => void. That type is then also automatically inferred for the returnedValue variable. As you can see, quite often TypeScript is able to automatically infer and propagate types a long way through your code. In many cases, you'll only need to add type annotations to function parameters.

Next Tutorial In Course

Learn TypeScript in Construct, part 8: Objects 20:09

Introduces objects, another key fundamental of TypeScript programming.

  • 0 Comments

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