Classes in TypeScript: Properties, Constructors and Methods

JavaScript is an object oriented programming language. Almost everything in JS is an object, with its attributes and methods.

Class creates a user-defined data structure, which holds its own data members (attributes) and member functions (methods), which can be accessed and used by creating an instance of that class.

Classes are like a blueprint for objects outlining possible behaviors and states that every object of a certain type could have.

Classes are defined via the keyword class. We should always add a method named constructor(), we'll see why later.

// Define an empty class Employee
class Employee {
	constructor() {}
};

Objects/Instances

An Object is an instance of a Class. A class is like a blueprint while an instance is a copy of the class with actual values. It’s not an idea anymore, it’s an actual employee, like a person named "Andrew" who is 30 years old.

You can have many employees to create many different instances, but without the class as a guide, you would be lost, not knowing what information is required.

After a class is defined, we can create objects of the class using the new keyword like this:

// Define an empty class Employee
class Employee {
	constructor() {}
};

let employee = new Employee();

Attributes/Properties

A class attribute is a JavaScript variable that belongs to a class and is shared between all the objects of this class. Let's add some attributes to our Employee class:

class Employee {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
};

let emp = new Employee('Andrew', 30);
	
console.log(emp.name); // prints 'Andrew'
	
emp.age = 40;

console.log(emp.age); // prints 40

We added two properties: the string name and the number age.

Now you can see why constructor() is so important: it is a special method for creating and initializing the attributes within an object.

The attributes of objects can be accessed and modified using the dot operator (.), like we did above with emp.name and emp.age.

The "this"

Every object in JavaScript has access to its own address through an important refference called this.

The this refference is an implicit parameter to all member functions. Therefore, inside a member function, this may be used to access and manipulate the attributes of that object, like we did above with this.name = name.

Member functions

Member functions are functions that belong to the class:

class Employee {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	
	// member functions:
	printName() {
		console.log(this.name);
	}
		
	printEmployee() {
		this.printName();
		console.log(this.age);
	}
};

let emp1 = new Employee('Andrew', 30);
	
emp1.printEmployee(); // prints 'Andrew', 30

let emp2 = new Employee('Mary', 25);
	
emp2.printEmployee(); // prints 'Mary', 25

As you can see, we access functions just like we access attributes: using the dot syntax (.).

The function call uses the attributes of the object it was called on. That's why the first printEmployee() prints 'Andrew' and 30 and the second prints 'Mary' and 25.

One more important thing to know is that when we call a member function from an other member function, we should use the this keyword like we did above: this.printName();

Rewriting classes as pure methods

Throught the tutorials you will notice that we don't use the class syntax. This is because a class can be also written as a function:

function Employee(name, age) {
	this.name = name;
	this.age = age;
	this.printName = function() {
		console.log(this.name);
	};
	this.printEmployee = function() {
		this.printName();
		console.log(this.age);
	};
}

let emp = new Employee('Andrew', 30);
emp.printEmployee();

Assignment
Follow the Coding Tutorial and let's write some classes.

Hint
Look at the examples above if you get stuck.