class in TypeScript

overview

If you want to be object-oriented and operate on objects, you must first have objects;
To create an object, you must first define a class. The so-called class can be understood as the model of the object;
The program can create objects of specified types according to classes;

I Define class

class Class name {
    Attribute name: type;
    
    constructor(parameter: type){
        this.Attribute name = parameter;
    }
    
    Method name(){
        ....
    }

}

II Constructor

You can use constructor to define a constructor method;

class C{
    name: string;
    age: number

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

At the same time, you can also directly define the attribute in the constructor:

class C {
    constructor(public name: string, public age: number) {
    }
}

When a subclass inherits the parent class, it must call the constructor of the parent class (if the constructor is also defined in the subclass)!

class A {
    protected num: number;
    constructor(num: number) {
        this.num = num;
    }
}

class X extends A {
    protected name: string;
    constructor(num: number, name: string) {
        super(num);
        this.name = name;
    }
}

If you do not call super in class X, an error will be reported!

III encapsulation

By default, the attributes of objects can be modified arbitrarily. In order to ensure the security of data, the permissions of attributes can be set in TS

1. static attribute:

Attributes or methods declared as static no longer belong to instances, but to class attributes;

Read only attribute (readonly):

If you add a readonly when declaring the attribute, the attribute becomes a read-only attribute and cannot be modified

2. Attributes in ts have three modifiers:

public (default): can be accessed and modified in classes, subclasses, and objects
protected: it can be accessed and modified in classes and subclasses
private: can be modified in class

protected

class Person{
    protected name: string;
    protected age: number;

    constructor(name: string, age: number){
        this.name = name; // Can be modified
        this.age = age;
    }

    sayHello(){
        console.log(`Hello, I am ${this.name}`);
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //Can be modified in subclasses
    }
}

const p = new Person('Sun WuKong', 18);
p.name = 'Zhu Bajie';// Cannot modify

private

class Person{
    private name: string;
    private age: number;

    constructor(name: string, age: number){
        this.name = name; // Can be modified
        this.age = age;
    }

    sayHello(){
        console.log(`Hello, I am ${this.name}`);
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //Cannot modify in subclass
    }
}

const p = new Person('Sun WuKong', 18);
p.name = 'Zhu Bajie';// Cannot modify

3. Attribute memory

For some attributes that do not want to be modified arbitrarily, you can set them to private. Directly setting them to private will make it impossible to access and modify the attributes through the object
We can define a set of methods to read and set attributes in a class. This kind of attribute read or set is called attribute accessor;
The method of reading attributes is called setter method, and the method of setting attributes is called getter method

class Person{
    private _name: string;

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

    get name(){
        return this._name;
    }

    set name(name: string){
        this._name = name;
    }

}

const p1 = new Person('Sun WuKong');
// Actually read the name attribute by calling the getter method
console.log(p1.name);
// Actually modify the name attribute by calling the setter method 
p1.name = 'Zhu Bajie'; 

At the same time, according to the set method and the actual needs, the assignment can be checked and judged to enhance the robustness of the code.

4. Static attributes and methods

Static attributes (Methods), also known as class attributes. You can use static attributes directly through classes without creating instances
Static attributes (Methods) start with static

class Tools{
    static PI = 3.1415926;
    
    static sum(num1: number, num2: number){
        return num1 + num2
    }
}

console.log(Tools.PI);
console.log(Tools.sum(123, 456));

IV inherit

Through inheritance, attributes and methods in other classes can be introduced into the current class, which is equivalent to copying the contents of the parent class to the child class.
characteristic:

  1. Override: when inheritance occurs, if the method in the subclass will replace the method with the same name in the parent class, this is called method override;
  2. super can be used in subclasses to complete the reference to the parent class

V abstract class

An abstract class is a class that is specifically used to be inherited by other classes. It can only be inherited by other classes and cannot be used to create instances

abstract class Animal{
  abstract run(): void;
  bark(){
      console.log('Animals are barking~');
  }
}

class Dog extends Animals{
  run(){
      console.log('The dog is running~');
  }
}

Methods starting with abstract are called abstract methods. Abstract methods have no method body and can only be defined in abstract classes. Abstract methods must be implemented when inheriting abstract classes;

Tags: Front-end Javascript TypeScript

Posted by MsAngel on Sun, 03 Jul 2022 03:45:39 +0930