Classes – TypeScript Patterns for Angular

Building on our knowledge of basic types, let’s now create more complex data types. The first one we’re going to explore is classes. An essential element of object-oriented programming, the class represents a model, which can be real, such as a person or vehicle, or abstract, such as a text box on a web page.

From the class, we create the objects that are the elements that our systems will manipulate to execute a business rule, as in the following example:
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
export function basic_class() {
  let client: Person = new Person(“Mario”, 7);
  console.log(`Name:${client.name} Age:${client.age}`);
}

First, we declare the Person class with the name and age properties by typing the properties, and then we create a method for the class called constructor. This method is special because it defines the rule for how the object will be instantiated from this class.

In the basic_class function, we instantiate an object called client, which is of the Person type with the new keyword. To retrieve the properties of this instantiated object, we use the notation client.name and client.age.

This declaration and use of class in TypeScript is almost the same as JavaScript except for typing the attributes of the class.

The same example in pure JavaScript would be as follows:
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
function basic_class() {
  let client = new Person(“Mario”, 7);
  console.log(`Name:${client.name} Age:${client.age}`);
}

Notice that the process of declaring the class and instantiating an object from it changes very little from TypeScript. However, as we will see in the following code block, TypeScript provides more resources for the use of the class in our projects.

In addition to attributes, classes also define methods, which are functions that an object can perform. In the example we are working on, we are now going to add a method:
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  toString(){
    return `Name:${this.name} Age:${this.age}`;
  }
}

The toString method returns a string that represents the object, so it accesses the attribute of the object instance using the reserved JavaScript word this.

There is a concept in object-oriented programming called the encapsulation of attributes. This consists of defining which attributes are accessible to the function that instantiates a given object.

This concept, important for the correct use of some design patterns, does not exist in its entirety in JavaScript. Every class attribute is public, but in TypeScript it is implemented and validated by the transpiler, as in the following example:
class Person {
  name: string;
  age: number;
  private id:number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.id =Math.floor(Math.random() * 1000);
  }
  toString(){
    return `Name:${this.name} Age:${this.age} ID: ${this.id}`;
  }
}

Here, we create a property called id that is generated when the object is instantiated, and we use the reserved word private, indicating that it should not be accessed from outside the class. Note that in class methods, this attribute is accessed normally.

Let’s try to force access from outside as in the following example to see what happens:
export function basic_class() {
  let client: Person = new Person(“Mario”, 7);
  console.log(client.toString());
  client.id = 100;
}

In this function, we instantiate a client object of the Person class and then we try to modify the id attribute. When trying to run the code, the TypeScript will indicate the following error:

Figure 3.1 – Error message when accessing a private attribute

Another object-oriented programming concept is inheritance. It defines an is a relationship between classes, as in, a customer is a person.

In practice, it makes a class have all the attributes and methods of the extended class, as in the following example:
class Client extends Person {
  address: string;
  constructor(name: string, age: number, address: string) {
    super(name, age);
    this.address = address;
  }
  toString(): string {
    return `${super.toString()} Address: ${this.address}`;
  }
}

Here, we are creating the Client class, which extends from the Person class. We add an attribute called address and create the constructor. As it is a class derived from Person, it is necessary to call the super method, which is the way we access the methods and attributes of the original class.

When using inheritance, we can optionally rewrite a method of the original class as we do with the toString method. This concept exists in JavaScript, but with TypeScript, the rules for the constructor and method rewrite are checked at compile time, giving us more confidence in our development.

Write a Comment Cancel reply