TypeScript for Beginners, Part 4: Classes

This series of tutorials will take you to learn TypeScript step by step. The first part briefly introduces TypeScript and recommends some IDEs that can be used to write TypeScript. The second part focuses on data types, and the third part discusses the basics of the TypeScript interface.

As you probably already know, JavaScript now supports class and object-oriented programming natively. However, TypeScript has long allowed developers to use classes in their code. This code is then compiled into JavaScript code that can run on all major browsers. In this tutorial, you will learn about classes in TypeScript. They are similar to their ES6 counterparts, but are more stringent.

Create your first class

Let's start with the basics. Classes are the basic part of object-oriented programming. You can use classes to represent any entity with certain properties and functions that can act on a given property. TypeScript gives you full control over properties and functions that are accessible inside and outside the classes it contains. Here is a basic example of how to create a class.

You may have noticed that the constructor is similar to get and name , as well as get but not readonly . If not specified explicitly, the parameter type of the setter is inferred from the return type of the getter. Starting with TypeScript 4.3, you can have a setter that accepts different types than the type returned by getter.

Implementing classes using interface

In our previous tutorial on the TypeScript interface, we learned that interfaces are basically used to specify the structure of different objects we will use in our code. Now, we will learn how to implement classes based on some previously declared interfaces.

 interface IPoint {
    x: number;
    y: number;
    position(x: number, y: number): void
}

interface IRectangle extends IPoint {
    width: number;
    length: number;
    area(width: number, length: number): number
}

class Point implements IPoint {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    position(): void {
        console.log(`The point is at (${this.x}, ${this.y}).`);
    }
}

class Rectangle implements IRectangle {
    width: number;
    length: number;
    x: number;
    y: number;

    constructor(x: number, y: number, width: number, length: number) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.length = length;
    }

    area(): number {
        return this.width * this.length;
    }

    position(): void {
        console.log(`The rectangle is at (${this.x}, ${this.y}).`);
    }
}

let myPoint = new Point(10, 20);

let myRect = new Rectangle(0, 0, 20, 30);

myPoint.position();

myRect.position();

console.log(myRect.area());

We created an IRectangle interface, just like we did in the previous tutorial. An additional change here is that we also add a function declaration to the interface.

IRectangle , which means it will have these four properties and two methods to output its position and display its area.

Summarize

In this tutorial, I try to introduce the basics of classes in TypeScript. We first created a very basic Person class that prints the name of a person into the console. After that, you learn the private keyword, which can be used to prevent accessing members of a class at any point in the program.

Finally, you learned how to extend different classes in your code using inherited base classes. You can learn more about classes in the official documentation.

The above is the detailed content of TypeScript for Beginners, Part 4: Classes. For more information, please follow other related articles on the PHP Chinese website!