Skip to main content
eLearner.app
Module 4 · Lesson 1 of 27/14 in the course~15 min
Module lessons (1/2)

Classes and Modifiers

TypeScript extends standard ES6 classes with powerful Object-Oriented Programming (OOP) features, such as static typing, access modifiers, and shorthand parameter properties.

Classes and Access Modifiers

In TypeScript, you can control the visibility of class members, properties, and methods using three main keywords:

  • public (default): the member is accessible from anywhere.
  • private: the member is accessible only within the class that defines it.
  • protected: the member is accessible within the class and its subclasses (inheritance).
TS
class Animal {
  public name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  public getAge(): number {
    return this.age;
  }
}

Parameter Properties

TypeScript offers a shorthand syntax to declare and initialize a class member directly in the constructor. By prefixing a constructor parameter with an access modifier, the property is automatically created and assigned:

TS
// This syntax does exactly the same as the previous example!
class Animal {
  constructor(
    public name: string,
    private age: number,
  ) {}
}

Implementing Interfaces

A class can implement one or more interfaces using the implements keyword. This ensures the class adheres to a specific contract by defining all required methods and properties:

TS
interface Flyable {
  fly(altitude: number): void;
}

class Bird implements Flyable {
  constructor(public name: string) {}

  fly(altitude: number): void {
    console.log(`${this.name} is flying at ${altitude} meters.`);
  }
}

Inheritance and super

TypeScript fully supports class inheritance. A class can extend another class using the extends keyword. If the subclass defines a constructor, it must call the base class constructor using the super() function before accessing this:

TS
class Person {
  constructor(public name: string) {}
}

class Student extends Person {
  constructor(
    name: string,
    public grade: number,
  ) {
    super(name); // Calls the Person constructor
  }
}

Try it yourself

Exercise 1: Car Class and Private Modifier

Exercise#ts.m4.l1.e1
Attempts: 0Loading…

Declare a class named Car. It must have a readonly model property (string) defined in the constructor, a private mileage property (number) initialized to 0, a public method drive(miles: number): void that increments mileage by miles, and a getter or method getMileage(): number that returns mileage.

Loading editor…
Show hint

Use private mileage: number = 0; to make the variable private, and constructor(public readonly model: string) {} as shorthand.

Solution available after 3 attempts

Exercise 2: Shape Interface and Circle Class

Exercise#ts.m4.l1.e2
Attempts: 0Loading…

Complete the code by implementing the Circle class which implements the Shape interface. The class must have a readonly radius property (number) set via constructor, and implement getArea(): number (returning Math.PI * radius * radius).

Loading editor…
Show hint

Use implements Shape on the Circle class and define the getArea(): number method.

Solution available after 3 attempts

Exercise 3: Abstract Vehicle Class and Motorcycle Subclass

Exercise#ts.m4.l1.e3
Attempts: 0Loading…

Declare a class named Motorcycle that extends the abstract class Vehicle. It must implement the start() method to return the string 'Motorcycle ' followed by the make (this.make) and ' started'.

Loading editor…
Show hint

Use class Motorcycle extends Vehicle and implement the start(): string method that returns the correct string.

Solution available after 3 attempts

Exercise 4: Parameter Properties and Inheritance

Exercise#ts.m4.l1.e4
Attempts: 0Loading…

Create a class named Employee that defines a readonly property id (number) and a public property name (string) using the constructor shorthand. Then, create a class Developer that extends Employee and adds a public property department (string) via the constructor.

Loading editor…
Show hint

Use super(id, name) in the Developer constructor and use public department to define the property via the constructor.

Solution available after 3 attempts