“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

In this section, we will learn about TS classes. What are the differences between TS classes and JS classes?

First up: classes

class

As we know, the purpose of class is to put related things together for easy management

A class contains two things (also called members) :

  1. attribute
  2. methods

The members of a class are all the properties and methods in the class

TS allows you to easily define a class using the class keyword

class Person{
  name:string; Age:number;
  show(){
    console.log(I call `The ${this.name}This year,The ${this.age}The `); }}Copy the code

The new keyword makes it easy to produce instances of a class, a process called instantiation

let  p1 = new Person('Alice'.12)
Copy the code

As above, P1 is an instance of the Person class

Another thing to note is that when an instance comes out of new, it actually calls a method in the class to initialize it, and that method is called a constructor; The constructor method is typically written explicitly in the class, and if no defined constructor is shown, the system’s implicit constructor is called

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

A member modifier in a class

Access modifier

The purpose of access modifiers is to prevent others from messing with things in a class

  1. public

Public, anyone can use it (default public)

  1. private

Private, used only by the class itself

  1. protected

Protected, only classes and subclasses can be used

Advice on using access modifiers: Use private as much as possible. Generally, all attributes are private, and private attributes can be accessed through accessors

class Person{
  private _num:number = 12;
  public get num() {return this._num;
  }
  public set num(val:number) {this._num = val; }}let p1 = new Person();
console.log(p1.num)
p1.num = 5;
console.log(p1.num)
Copy the code

TSC: ts generates ES4 code by default, and we need to specify the version of ts compiled by –target

tsc --target ES5 1.js
Copy the code

Of course, you can also configure accessors in tsconfig.json files for the benefit of security and convenience

Read-only modifier

Readonly Reads but does not write

class Person{
  readonly name = 'Alice';
}
let p = new Person();
console.log(p.name);
Copy the code

Note that even readonly things can be written before initialization, i.e. initialized or changed within constructor

class Person{
  readonly name:string;
  constructor(name:string){
    this.name = name; }}Copy the code

So, we know that the readonly property has only two places to write:

  1. Assign the initial value at the same time as the declaration
  2. Assign or modify the initial value in the constructor

Static modifier

Static members are called static members. Static members are called by the class name instead of being instantiated

class Person{
  static a = 98;
}
console.log(person.a)
Copy the code

Static members are usually used for something common to the entire class

Pay attention to the point

These three modifiers: access, read-only, and static modifiers can be combined to modify the same member but need to be noted

  1. Modifiers are optional. If no modifiers are written, there is one by defaultpublic
  2. There can be only one modifier of the same kind
  3. The three modifiers are in order: access, static, and read-only

Public /static/protected public/static/protected

END

That’s all for this article. If you have any questions, please point out