Learn TypeScript in Construct, part 9: Object methods

UpvoteUpvote 4 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

120 visits, 137 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 18 Jul, 2025.

This tutorial series is still under development

This is part 9 of the tutorial series Learn TypeScript in Construct. This part continues on from part 8. So in case you missed it, see Learn TypeScript in Construct, part 8: Objects.

In this part we'll continue using an empty script file in a new Construct project as we've done for the past few tutorials. We've previously covered functions and objects separately, but they have some interesting and useful special features when combined, which this part covers.

Methods

An object can have a function for one of its properties. The example below shows an object with a property logMessage which is a function.

let person = {
	name: "Joe",

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

// Logs "Hello world!" to the console
person.logMessage();

Notice how we're combining several things we've learnt so far:

  • There's an object with a property named logMessage
  • That property has a value that is a function (using a function expression)
  • The property is accessed with a dot, and the function called with (), so the line person.logMessage() calls the function stored in the logMessage property of the object person

Functions that are used like this are also referred to as methods. This is just another name for a function that is associated with an object.

What is the type of the object person? The type of the function is one that takes no parameters and returns nothing, which is () => void. That is then the type of the logMessage property of the object. So the object's full type is this:

{
	name: string;
	logMessage: () => void;
}

As before these types can end up getting pretty verbose, so we'll generally rely on TypeScript's type inference to work that out for us. However it's worth knowing the full type annotation as it helps you to understand key aspects of how TypeScript works.

Shorthand syntax

The previous example can also be written with a shorthand syntax for the logMessage method, omitting the colon and function keyword. This works the same as before, it just provides a shorter way to write it.

let person = {
	name: "Joe",
	
	// Shorthand syntax for method
	logMessage()
	{
		console.log("Hello world!");
	}
};

person.logMessage();

When you do this, the type that is inferred for the object changes to this:

{
	name: string;
	logMessage(): void;
}

This is an alternative, and more typical, way to write the type definition for a method. Notice the => part has disappeared: it looks a lot more like a normal property type, but with the parameters part before the colon.

this

Suppose we want to change the logMessage method to logName and have it include the name property of the object in the logged message. One way to do this would be to refer to person.name in the method. This would work, but the method would be tied to the specific person variable the object is stored in. Objects can be assigned to different variables, passed as function parameters, and so on. So we actually want a way to say "the name property of the object the method was called on".

TypeScript provides the this keyword to do that. It refers to the object the method was called on. The example below demonstrates a logName method using this.

let person = {
	name: "Joe",
	
	logName()
	{
		console.log(`The person's name is ${this.name}`);
	}
};

// Logs "The person's name is Joe"
person.logName();

In other words, calling obj.method() will call the function method() with this referring to obj.

Now we have a way to create objects with both data properties and methods that use those data properties. This is referred to as Object Oriented Programming, or OOP.

What if you write a normal function (not a method) that uses this? TypeScript will report this as an error, as it doesn't know what type of object this should refer to.

function logThis()
{
	// Error
	console.log(`'this' is ${this}`);
}

You are allowed to write code using this outside of a function. However in this case it just has the value undefined. It is meant to refer to an object inside a method, so there isn't anything for it to refer to.

console.log(this);	// undefined

  • 0 Comments

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