TypeScript Classes and Constructors

In this post you’ll learn about TypeScript constructors, how to create classes, and how they differ to their ES5 counterpart of traditional constructor functions and prototype methods.

First, what is a class? A class is a special and self-contained segment of code that constructs brand new objects when created. A class in TypeScript can also include properties, methods, and constructor logic.

Second, what is a constructor? A constructor is a special function that exists inside a class, that is called only once when the object is created.

Classes are unique, and therefore so are the constructor function calls.

Classes and Constructors

Classes are syntax sugar for creating traditional constructor functions prototypes. They are cleaner, shorter, and much easier to read.

You may be familiar with things like .prototype in JavaScript which allow us to inherit properties from other objects.

In TypeScript, we can create a class definition like this:

class Product {
  constructor() {}
}

This creates a class definition and defines a constructor, giving us a unique reference called Product to refer to when creating new objects.

The ES5 equivalent to a class like this would be this:

function Product() {}

From the above, they look very similar, however the difference lies in the fact our class is not the constructor, but holds a constructor function. In our second example, the function Product() {} acts as both the class and constructor.

To pass data to your constructor function, we create a new instance of the class:

class Product {
  name: string;
  price: number;
  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }
}

const espresso = new Product('Espresso', 399);

With our ES5 approach, things look very similar:

function Product(name, price) {
  this.name = name;
  this.price = price;
}

Using the class keyword helps create a specific place to write logic for your object initialization, where we assign any variables passed in through the constructor to the internal class.

Remember, everytime we use the new keyword we create a unique instance, so no two references are the same.

So that is how to use constructors with TypeScript, and how they differ from traditional ES5 classes in JavaScript - so what about properties and methods?

Well, we’ve already learned properties because when we assign this.name = name inside the constructor, we are creating a public property that’s available throughout the class.

With methods, the new class syntax allows us to very nicely add logic, for example:

class Product {
  name: string;
  price: number;
  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }

  getName(): string {
    return this.name;
  }
}

const espresso = new Product('Espresso', 399);

 // 'Espresso'
console.log(espresso.getName());

In the traditional constructor function example, it would look like this:

function Product(name, price) {
  this.name = name;
  this.price = price;
}

Product.prototype.getName = function() {
  return this.name;
};

The way you use the constructor function versus a TypeScript class remains the same, but I think at this point we can agree a class is much clearer to group and contain related logic.

Despite a TypeScript class being syntax sugar, it will still be compiled down to the ES5 JavaScript equivalent, unless you tell the TypeScript compiler not to via tsconfig.json - which depending on the browser support for classes may or may not be a good idea.

Methods that we create on TypeScript classes are also known as ‘instance methods’, as we create an instance (brand new object) every time.

What’s more, we can now safely check the object type of our instance via the instanceof keyword:

const espresso = new Product('Espresso', 399);

// true
console.log(espresso instanceof Product);

What’s also helpful, in terms of debugging, is visually being able to see your custom class object in the console when logging things out:

const espresso = new Product('Espresso', 399);

// Product { name: 'Espresso', price: 399 }
console.log(espresso);

This shows you how a class and constructor function differs from a plain object literal in JavaScript.

🏆 Check out my series of TypeScript Courses where you’ll learn TypeScript in-depth with real-world scenarios and examples to supercharge your JavaScript development.

And there we have it! Your introduction to TypeScript classes, constructors, prototypes and methods and how they differ from ES5 constructor functions.