TypeScript Classes#

A class is an object-oriented programming (OOP) concept that allows for the instatiation (or creation) of objects. In TypeScript, the name of a class is the name of the default constructor (the function called when creating objects of the class) as well as the name of the type of the objects that are created by the constructor.

In the example below, we declare a class User containing two public properties and one public method:

class User {

  name: string; // public property

  age: number;  // public property

  constructor(name: string, age: number) {

    this.name = name;

    this.age = age;

  }

  // public method

  printUserInfo() {

    console.log(`name: ${this.name}, age: ${this.age}`);

  }

}

The User constructor takes two parameters: name and age. The type of the parameters has to match the given signature or we'll get an error from the TypeScript compiler. The signature of a function consists of the function name, parameter names, parameter types, and function return type. Below we show correct and incorrect usage of our User class:

let mike: User; // mike is type User

mike = new User(); // Error: constructor needs 2 parameters

mike = new User(1, 2); // Error: first parameter should be type string

mike = new User('Michael', 32); // OK

mike.printUserInfo(); // name: Michael, age: 32

mike.name; // 'Michael'

mike.age; // 32

Notice we set the type of mike to be User. By doing so, we get type checking for the public properties and methods defined in the User class.

A common pattern that we'll use in FinanceMe is to set internal class properties to private so they are not accessible outside of the class. In order to access the properties, methods are defined for retrieving and updating those properties:

class User {

  private name: string;

  private age: number;

  constructor(name: string, age: number) {

    this.name = name;

    this.age = age;

  }

  getName() {

    return this.name;

  }

  getAge() {

    return this.age;

  }

  printUserInfo() {

    console.log(`name: ${this.name}, age: ${this.age}`);

  }

}

const katie = new User('Katherine', 35);

katie.name; // Error: 'name' is a private property

katie.age; // Error: 'age' is a private property

katie.getName(); // 'Katherine'

katie.getAge(); // 32

Methods that retrieve properties are conventionally called getters while methods that update properties are called setters.

Here we are referencing the language-agnostic concept of setters and getters and not the JavaScript feature that uses the get and set keywords for intercepting property access/updates in classes.

We dive further into classes and object-oriented patterns later in the book.

Expense Class#

Now that we have a basic understanding of classes in TypeScript, we can implement our first class, Expense.

The Expense class is responsible for representing an expense, which consists of four things:

• A label

• An amount

• A date

• A unique ID

The label, amount, and date will be passed to the Expense constructor when creating new Expense objects. The unique ID will not be passed to the constructor. Instead, we will assign each Expense object a unique ID upon creation.