A Brief Introduction to TypeScript — Part 3

Object-oriented programming (OOP) has been a very popular programming paradigm during the last decades due to its level of scalability and modularity 📚. Traditional JavaScript supports this paradigm but it uses prototypes for inheritance instead of classes, however latest versions of the standard introduced the possibility to use a class-oriented approach.

This new approach can be considered as syntactic sugar because it doesn’t change the existing prototype-based inheritance model, but allows a simpler way to create objects and manage inheritance. TypeScript allows us to use these techniques now without having to wait for the browsers to support them 🚀.

Class declaration

In OOP paradigm, a class represents the blueprint of an object or entity, it provides initial values for state and implementation of its behaviour. This representation allow us to create reusable components and TypeScript provides syntax that is very common in other object-oriented languages.

In general, a class is composed of a name, attributes and methods. The syntax to create a simple class looks like this:

This class contains one attribute (name) and two methods ( constructor, greet).

Now that we have the blueprint, we can create several objects based on this class. When an object is created by the constructor of a specific class, this object is called an instance of the class.

We can create and initialize an instance of this class using its constructor as follows:

Now that we have created john, we can use the behaviour implemented in the class. In this case, the greet method:

The console output is: Hi! I'm John Doe.

Member variables

In TypeScript, each class member (property or method) is public by default. This means that they are visible outside the class, even if they don’t have the explicit public label:

If we create an instance:

The console output is: John Doe. But since each member is public by default, we can access and change them outside of the class:

The console output is: Jane Doe, even if we created a person called John Doe. This free access to class members can be very dangerous if it’s not controlled ⚠️, that’s why TypeScript adds the possibility to have private members.

When a member is marked private, it can’t be accessed from outside of its containing class.

The transpiler would alert us of this error with a message like: Property “name”is private and only accessible within class “Person".

Class behaviour

In the last article we developed some typed functions, mostly related with arithmetic operations, like add and multiply. We could create a basic calculator class with them 🔢 :

Notice that we didn’t write function for the methods.

The behaviour of this class is defined by its methods, and we can expand these until we create a class that fully defines the behaviour that a basic calculator should have:

Inheritance

One of the main features in OOP paradigm is the possibility to create new classes based on others using inheritance.

For instance, we would like to extend our basic calculator into a scientific calculator. Calculator would be our parent class:

And we would like to extend from it into another class called ScientificCalculator, this would be the new child class that inherits all the properties and methods existing in Calculator. ScientificCalculator can also include additional properties and methods not included in the parent class.