Pure JavaScript

class Animal {
  name;

  constructor(name) {
    this.name = name;
  }

  move(distanceInMeters) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

let cat = new Animal('Cat');
cat.move(10);

TypeScript Annotations

class Animal {
  name: string;

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

  move(distanceInMeters: number): void {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

let cat: Animal = new Animal('Cat');
cat.move(10);

Access Modifiers

Note the public and private:

class Animal {
  private name: string;

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

  public move(distanceInMeters: number): void {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

let cat = new Animal('Cat');
cat.move(10);
cat.name = 'Dog'; //! Error

Modern JavaScript Private

class Animal {
  #name: string;

  constructor(name: string) {
    this.#name = name;
  }

  public move(distanceInMeters: number): void {
    console.log(`${this.#name} moved ${distanceInMeters}m.`);
  }
}

let cat = new Animal('Cat');
cat.move(10);
cat.#name = 'Dog'; //! Error

Protected

class Animal {
  protected name: string; //! Keeps instance error by allows child classes access

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

  public move(distanceInMeters: number): void {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

let cat = new Animal('Cat');
cat.move(10);
cat.name = 'Dog'; //! Error

class Bird extends Animal {
  fly(distanceInMeters: number) {
    // this.name is allowed
    console.log(`${this.name} flew ${distanceInMeters}m.`);
  }
}

Transcript

00:00

Let's talk about JavaScript classes. Here we have a class animal with the property name, a constructive function that is used to create instances of this class and a method called move that takes a distance in meters and logs out something to the console. We create a variable to store an instance of this class, and then we can call methods on this instance. And our TypeScript already understands all the information that is present in the code right now. But additionally, it allows us to annotate any of the properties, the parameters of the constructor, as well as the parameters of the methods, as well

00:35

as the return type. TypeScript also allows fine-grained access control of the properties and methods of the class. Now, by default, all properties and methods are public, which is a standard for JavaScript. However, we can be explicit about this access by using the public keyword before any of the properties or methods. Now, there might be some class members that we do not want to be accessible outside of the class body. For example, we might not want the name property to be accessible outside. In order to limit the access of a member only within the class body, we can use the TypeScript keyword called private.

01:10

And now any access outside the class body results in a compiled time error. Now, JavaScript also supports class inheritance. So we can create a class called Bird that extends animal and has an additional method called Fly. Now, as mentioned, private members are only accessible in the class body, so we get a compile time error when we try to use the name property in the child class. TypeScript provides another access modifier called protected, which still keeps remember inaccessible on instances, however makes it accessible within the class hierarchy.

01:43

So we can access this name property from the Child Bird class.

Account Required

Professional TypeScript Masterclass Lessons

Classes in TypeScript