Learn TypeScript in Construct, part 9: Object methods

UpvoteUpvote 4 DownvoteDownvote

Index

Tagged

Features on these Courses

Stats

121 visits, 138 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.

Classes

Classes are a common feature of many object-oriented programming languages, and TypeScript offers them too. Classes have a wide range of sophisticated features. However we will just cover the basics here, demonstrating how to write a simple example with class syntax.

If you want to create multiple objects with the same properties, it can get quite repetitive. In the example below, notice how we have to keep repeating the same object properties and methods over and over again.

let person1 = {
	name: "Joe",
	age: 25,
	preferredFood: "pizza",
	logDetails()
	{
		console.log(`${this.name} is ${this.age} and likes ${this.preferredFood}`);
	}
};

let person2 = {
	name: "Jenny",
	age: 30,
	preferredFood: "noodles",
	logDetails()
	{
		console.log(`${this.name} is ${this.age} and likes ${this.preferredFood}`);
	}
};

let person3 = {
	name: "Maya",
	age: 20,
	preferredFood: "burrito",
	logDetails()
	{
		console.log(`${this.name} is ${this.age} and likes ${this.preferredFood}`);
	}
};

// Show each person in the console
person1.logDetails();
person2.logDetails();
person3.logDetails();

We can avoid this repetition by declaring a class as shown below. It essentially defines a template from which similar kinds of objects can easily be created.

// Declare a class named 'Person'
class Person {

	// Declare the properties
	name: string;
	age: number;
	preferredFood: string;

	// Declare a special method named 'constructor'
	constructor(name: string, age: number, preferredFood: string)
	{
		this.name = name;
		this.age = age;
		this.preferredFood = preferredFood;
	}

	// Declare a method that logs the details
	logDetails()
	{
		console.log(`${this.name} is ${this.age} and likes ${this.preferredFood}`);
	}
};

We've introduced quite a lot of new things to look at here, but it mostly combines things that we've already covered. Think of it as a type declaration that includes object methods. Notice the following points:

  • We use the class keyword, followed by the name, and braces { and }, inside of which is the contents of the class.
  • Inside the class, we define just the types of the object properties that it has. This is similar to the types used for objects that we saw previously.
  • The class can also define methods, using the same shorthand syntax as we used with objects. One of these functions has the name constructor, which has a special meaning inside a class, which we'll come on to shortly.

Defining a class does not actually create an object. This is why you only need to specify the types of the properties, rather than having to give them actual values. This is why it's more like a complex type definition - it defines something that we can create, rather than actually creating something.

The type of this class is similar to the following type declaration:

type Person = {
	name: string;
	age: number;
	preferredFood: string;

	constructor(name: string, age: number, preferredFood: string): Person;
	logName(): void;
}

However as classes are such a fundamental part of programming, and these type annotations can quickly get complicated, TypeScript just uses the name of the class as a type. So the type of this class is just Person.

So what's the deal with that special constructor method? It's used to create the class! For that we need a new keyword: new.

New

Now we have defined a class, suppose we want to create an actual object that has all the properties and methods defined by the class. This is done by using the new keyword followed by a function call, where the name of the function is the name of the class. This actually calls the special constructor method. An example of that is new Person("Joe", 25, "pizza"). Overall this performs three steps:

  1. Creates a new object with all the properties and methods specified by the class
  2. Calls the constructor method of the Person class, with this referring to the new object
  3. When the constructor finishes, it returns the new object

Try out adding this code beneath your existing class Person { ... } declaration:

let person1 = new Person("Joe", 25, "pizza");

// Logs: "Joe is 25 and likes pizza"
person1.logDetails();

The first line uses new to create a new object with all the properties and methods of the Person class. It then calls the constructor method of the Person class with the given parameters. Notice that in the class definition, the constructor just assigns the parameters to the object properties, using this. In other words, it initializes all the object properties to the given values. Then it returns the newly created object, which is assigned to the variable person1.

Once that has all completed, class methods can be called in much the same way as object methods. person1.logDetails() calls the logDetails() method with this referring to person1.

We can extend this to create all three person objects from our previous example like so (once again, using this code below the existing class Person { ... } declaration):

// Create three different instances of the 'Person' class
const person1 = new Person("Joe", 25, "pizza");
const person2 = new Person("Jenny", 30, "noodles");
const person3 = new Person("Maya", 20, "burrito");

// Call methods on each instance in turn
person1.logDetails();
person2.logDetails();
person3.logDetails();

It's been quite a jump from objects to classes. However classes are fundamental to object-oriented programming, and essential when interacting with both Construct and the browser built-in features. It's important to be familiar with them, even as a beginner.

Other features

Classes have many more features. However we won't go in to any more detail on them here. If you want to dig deeper in to them, take a look at Classes on MDN for the JavaScript side of things, and Classes in the TypeScript Handbook for the reference on TypeScript's handling of classes. However in order to focus this guide on quickly learning the basics of TypeScript, we'll move on. For now, we've just shown that if you want to create lots of objects with the same properties and methods, the best way to do that is with class syntax. Classes are how most object-oriented TypeScript code is written.

Conclusion

In this part we've covered;

  • Using functions in object properties, also known as methods
  • The shorthand syntax for methods (also used in classes)
  • How this refers to the object the method was called on
  • How arrow functions handle this differently, in a way that is often useful
  • Adding a "click" event handler that runs a function whenever something happens
  • The class syntax to define a set of object properties and methods, including a special constructor method
  • Using the new keyword to create objects from a class

That's all we need to cover regarding objects and functions for now, which together have been covered by the past four parts of this guide. However it's well worth the time to get familiar with them, as they are all are fundamental parts of programming. It's hard to get anything serious done without them! In the next part we'll move on to some other data structures that are useful for programming, such as arrays.

Learn more

If you want to dig deeper, you can learn more about the features mentioned in this guide at the following links:

  • 0 Comments

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