Post

Typescript Pt. 5 - Classes with TypeScript

Classes in TypeScript are a way to create objects with properties and methods. They are similar to classes in other object-oriented programming languages like Java and C#.

Modifiers

Modifiers are keywords that can be used to change the behavior of a class member (methods and properties inside a class).

There are three modifiers in TypeScript:

  1. Public: This is the default modifier. It means that the member can be accessed from anywhere. For example, if you don’t specify a modifier for a property, it will be public like below:
1
2
3
4
5
class Car extends Vehicle {
  drive(): void {
    console.log("vroom");
  }
}
  1. Private: This modifier means that the member can only be accessed from inside the class. For example, if you specify a modifier for a property, it will be private like below:
1
2
3
4
5
class Car extends Vehicle {
  private drive(): void {
    console.log("vroom");
  }
}
  • private members can only be accessed from inside the class. For example, if you try to access a private property from outside the class, you will get an error:
1
2
3
4
5
6
7
8
class Car extends Vehicle {
  private drive(): void {
    console.log("vroom");
  }
}

const car = new Car();
car.drive(); // Error: Property 'drive' is private and only accessible within class 'Car'.
  • to access a private property from outside the class, you need to use a getter method:
1
2
3
4
5
6
7
8
9
10
11
12
class Car extends Vehicle {
  private drive(): void {
    console.log("vroom");
  }

  getDrive(): void {
    this.drive();
  }
}

const car = new Car();
car.getDrive(); // vroom
  • the getter method is a public method which accesses the private property using this keyword.
  1. Protected: This modifier means that the member can only be accessed from inside the class and from classes that extend it.
    • protected members can only be accessed from inside the class and from classes that extend it. For example, if you try to access a protected property from outside the class, you will get an error:
1
2
3
4
5
6
7
8
class Vehicle {
  protected honk(): void {
    console.log("beep");
  }
}

const vehicle = new Vehicle();
vehicle.honk(); // Error: Property 'drive' is protected and only accessible within class 'Car' and its subclasses.
  • to access a protected property from outside the class, you need to do so from a class that extends it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Vehicle {
  protected honk(): void {
    console.log("beep");
  }
}

class Car extends Vehicle {
  private drive(): void {
    console.log("vroom");
  }

  getDrive(): void {
    this.drive();
  }
}

const car = new Car();
car.getDrive(); // vroom
  • the getter method is a public method which accesses the protected property using this keyword.

  • The goal of the modifiers is to restrict access to certain members of a class.

Fields

Fields are properties inside a class. They are similar to variables, but they are declared inside a class.

  • Fields can be initialized with a value:
1
2
3
4
5
6
class Vehicle {
  public color: string = "red";
}

const vehicle = new Vehicle("orange");
console.log(vehicle.color); // orange
  • Fields can be initialized with a value from the constructor:
1
2
3
4
5
6
7
8
9
class Vehicle {
  color: string;
  constructor(color: string) {
    this.color = color;
  }
}

const vehicle = new Vehicle("orange");
console.log(vehicle.color); // orange
  • Fields can be initialized with a value from the constructor using the public keyword:
1
2
3
4
5
6
class Vehicle {
  constructor(public color: string) {}
}

const vehicle = new Vehicle("orange");
console.log(vehicle.color); // orange
  • In the above example, the color field is initialized with the value of the color parameter passed to the constructor.
  • When an argument is passed to the constructor, it is automatically assigned to the field with the same name.

Modifiers work with fields the same way as they do with methods.

This post is licensed under CC BY 4.0 by the author.