Reprint

TypeScript Basic Introduction - Class - Advanced Skills

Project Practice Warehouse

https://github.com/durban89/typescript_demo.git
tag: 1.1.5

In order to ensure that the following learning demonstration needs to install ts-node, so that each subsequent operation can directly run to see the output results.

npm install -D ts-node

The latter can be used in practice by themselves.

npx ts-node script path

class

Advanced skills

Constructor

When you declare a class in TypeScript, you actually declare a lot of things at the same time. The first is the type of instance of the class.

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter: Greeter;
greeter = new Greeter('Gowhich');
console.log(greeter.greet());

After running, the following results are obtained

$ npx ts-node src/classes_7.ts
Hello, Gowhich

Here we write let greeter: Greeter, meaning that the type of instance of the Greeter class is Greeter. This is an old habit for programmers who have used other object-oriented languages.

We also created a value called a constructor. This function is called when we use new to create class instances. Let's take a look at what the above code looks like when compiled into JavaScript, as shown below

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greeter;
greeter = new Greeter('Gowhich');
console.log(greeter.greet());

In the above code, var Greeter will be assigned a constructor. When we call new and execute this function, we get an instance of a class. This constructor also contains all the static properties of the class. In other words, we can think of classes as having both the instance part and the static part. Let's rewrite this example a little and see the difference between them.

class Greeter {
    static standardGreeting: string = 'Hello, World';
    greeting: string;
    greet() {
        if (this.greeting) {
            return "Hello, "+this.greeting;
        } else {
            return Greeter.standardGreeting;
        }
    }
}

let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());

let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = 'Hello, other';

let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());

The results are as follows.

$ npx ts-node src/classes_7.ts
Hello, World
Hello, other

In this case, greeter1 looks the same as before. We instantiate the Greeter class and use this object. As we have seen before.

Then we use classes directly. We created a variable called greeterMaker. This variable holds the class or class constructor. Then we use typeof Greeter, which means to take the type of the Greeter class, not the type of the instance. Or rather, "Tell me the type of Greeter identifier," which is the type of constructor. This type contains all the static members and constructors of the class. Then, as before, we use new on greeterMaker to create instances of Greeter.

Use classes as interfaces

Class definitions create two things: the instance type of the class and a constructor. Because classes can create types, you can use classes where interfaces are allowed.

class Point {
    x: number;
    y: number;
}

interface Point3D extends Point {
    z: number;
}

let point3d: Point3D = {
    x: 1,
    y: 2,
    z: 3,
}

console.log('point3d = ', point3d);

The results are as follows.

$ npx ts-node src/classes_7.ts
point3d =  { x: 1, y: 2, z: 3 }

The address of the practice project at the end of this example

https://github.com/durban89/typescript_demo.git
tag: 1.1.6