Classes in TypeScript

TypeScript is an object oriented programming language. Almost everything in it 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 (also called a property or field) is a variable that belongs to an object of the class: every object has its own copy. In TypeScript, we declare each attribute with its type in the class body, before the constructor. Let's add some attributes to our Employee class:

class Employee {
	name: string;
	age: number;

	constructor(name: string, age: number) {
		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 has access to itself through an important reference called this.

The this reference 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 {
	name: string;
	age: number;

	constructor(name: string, age: number) {
		this.name = name;
		this.age = age;
	}
	
	// member functions:
	printName(): void {
		console.log(this.name);
	}
		
	printEmployee(): void {
		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

Throughout the tutorials we use the class syntax. Be aware that, in the JavaScript that TypeScript compiles to, a class can also be written as a function:

function Employee(this: any, name: string, age: number) {
	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.