TypeScript: Permission Modifiers, Getters and Setters, Parameter Properties, Index Signatures, Static Members

Access Modifier

Access modifiers can specify the scope in which attributes and methods in a class can be used.

Modifier Description
public Class attributes and class methods modified by public
keywords can be used anywhere (current class, subclass, instance)
private by private
Keyword modified class attributes and class methods can only be used in the current class.
protected was protected
Keyword modified class attributes and class methods can be used in the current class and subclasses.

public public

The public modifier can be omitted, and the default is public when no modifier is added.

class Vehicle {<!-- -->
    wheels: number = 240;
    
    constructor() {<!-- -->
        this.drive(); // can be called in the parent class
    };
    
    public drive() {<!-- -->
        console.log("drive");
    };
};

class Car extends Vehicle {<!-- -->
    brand: string = "BMW";
    
    super.drive(); // can be called in subclasses
};

// create an instance
const car = new Car();

car.drive(); // can be called in the instance object

private

private can only be used within the current class.

class Vehicle {<!-- -->
    wheels: number = 240;
    
    constructor() {<!-- -->
        this.drive(); // can be called in the parent class
    };
    
    private drive() {<!-- -->
        console.log("drive");
    };
};

class Car extends Vehicle {<!-- -->
    brand: string = "BMW";
    
    // super.drive(); // cannot be called in subclasses
};

// create an instance
const car = new Car();
// car.drive(); // cannot be called in instance object

protected

Can be used in the current class and subclasses.

class Vehicle {<!-- -->
    wheels: number = 240;
    
    constructor() {<!-- -->
        this.drive(); // can be called in the parent class
    };
    
    private drive() {<!-- -->
        console.log("drive");
    };
};

class Car extends Vehicle {<!-- -->
    brand: string = "BMW";
    
    super.drive(); // can be called in subclasses
};

// create an instance
const car = new Car();
// car.drive(); // cannot be called in instance object

Getters and Setters

It is the encapsulation of attribute access, through which the monitoring of the setting of attribute access can be realized. Use Getter when getting the attribute value, and use Setter when modifying the attribute value.

class Employee {<!-- -->
    private _salary: number; // private attribute: salary
    
    construction(salary: number) {<!-- -->
        this._salary = salary;
    };
    
    // get private property
    get salary() {<!-- -->
        return this._salary;
    };
    
    // Modify private properties
    set salary(salary: number) {<!-- -->
        this._salary = salary;
    };
};

const e = new Employee(10000);
e. salary(); // 10000
e.salary(20000); // pass parameters, call the set method to modify private properties

Parameter attribute

TypeScript provides special syntaxfor converting constructor arguments into class properties with the same name. These are called parameter properties and are defined by preceding the constructor parameters with the permission modifiers public, private, protected, or readonly to create.

class Vehicle {<!-- -->
    // omit defined class attributes
    // color: string; maxSpeed: number;
    
    // Omit defining class attributes by adding modifiers to the parameters on the constructor
    constructor( public color: string, public maxSpeed: number ) {<!-- -->
        ...
    };
};

const v1 = new Vehicle("white", 240);
console.log(v1); // { color: "white", maxSpeed: 240 }

Index Signature

Dynamically adding properties to objects in TypeScript is not allowed by default and requires the use of index signatures. Index signatures can be used to restrict properties without knowing the name of the property The types of the object’s properties and the types of the object’s values.
Restricting the type of an attribute without determining the attribute name means that we can dynamically add any attribute to the object, but the attribute type must meet the requirements.

// Many attribute types are the same, only the attribute names are different
class SeatAssignment {<!-- -->
    // Define as many attribute names as you need.
    A1: string,
    A2: string,
    A3: string,
    ...
};

const seat = new SetaAssignment();
seat.A1 = "Zhang San";
seat.A2 = "Li Si";
seat.A3 = "Wang Wu";
// grammar format
[property name: property name type]: property value type


// The index signature can restrict the type of the attribute and the type of the attribute value without restricting the attribute name.
class SetaAssignment {<!-- -->
    // You only need to define one to create multiple conforming attributes
    [seatNumber: string]: string,
};

const seat = new SetaAssignment();
seat.A1 = "Zhang San";
seat.A2 = "Li Si";

// By default, the toString method will be executed to convert to string type, but objects and boolean values will not work
seat[1] = "Wang Wu";
console.log(seat["1"]); // Wang Wu

Static members

Class attributes and class methods modified by static keywords in a class are called static members, and static members belong to classes >, so the way to access static members is class name. static member name.

class Person {<!-- -->
    static name: string = "Zhang San";
};

// visit
console.log(Person.name);

const p = new Person();
// p.name // instance cannot access static properties

For any object of this class, a static member is a public storage unit. When any object of this class accesses it, it gets the same value. Similarly, when an object of any class modifies it, it is also in the Operate on the same memory unit, so static attributes are mainly used for data shared by each object.

class Rich {<!-- -->
    static count = 0;
    
    constructor() {<!-- -->
        // Record how many times the object was created
        Rich.count++;
    }
}

Static members always exist in memory, and non-static members need to be instantiated before they can be allocated to memory, soStatic members cannot access non-static members, and non-static members can access static members in the class.

class Rich {<!-- -->
    // static members
    static count = 0;
    
    constructor() {<!-- -->
        Rich.count++;
    };
    
    // Non-static members can access static members
    getCount() {<!-- -->
        return Rich.count;
    };
    
    static fn() {<!-- -->
        // Static members cannot access non-static members
        // this. getCount();
    }
}