Use of TypeScript Class

Preface

Reference: Brother Man’s notes

In ES5, JavaScript uses the concept of prototype to describe objects.
ES6 provides a writing method that is closer to traditional languages ​​(such as Java) and introduces the concept of Class class, which is also a method of describing objects.
The Class keyword of ES6 can be regarded as a kind of syntactic sugar, encapsulating the prototype writing method of ES5, making the writing method of object prototype clearer and more in line with object-oriented programming methods.

As for how ES6 defines a class, please see below.

// ES6定义一个类，没有使用TS
class Person {
    
    
  constructor(name, age){
    
     //构造方法，用来接收参数
    //this 代表的是实例对象
    // this.xxx 时, 该xxx属性就已经在this中创建了
    this.name = name 
    this.age = age
  }
  say(){
    
     //类的方法，不需要加上function
    return this.name + '+' + this.age
  } 
}
// 实例化类
let per = new Person('xinz', 20)
console.log(person1.say()) //xinz + 20 

TS defines variables in the class

Similar to the definition in ES6, the difference is that variables cannot be defined directly on the constructor, and variables need to be declared first and then defined.

// TS定义一个类，重写上面的传统类方法定义
class Person {
    
    
    // 先声明变量
    name: string
    age: number
  	// 之后才能在constructor上面定义 
    constructor(name: string, age: number){
    
    
        this.name = name
        this.age = age
    }
    say(){
    
    
        return this.name + '|' + this.age
    }
}
let per = new Person('xinz', 20)
console.log(per.say())

Modifiers of TS class

The class modifiers include ** public, private and protected **. These modifiers are modified when the variable is declared.

class Person {
    
    
  public name: string
  private age: number
  protected other: string
  constructor(name: string, age: number, other: string) {
    
    
    this.name = name
    this.age = age
    this.other = other
  }
  say(){
    
    
    return this.name + '|' + this.age + ', ' + this.other
  }
}

let per = new Person('xinz', 20, 'supplementary instruction...')

// 1. 通过 public 声明的是公共变量，如果不加修饰符默认声明就是公共变量
// 可以通过实例化后的对象(外部)访问，也可以类本身(内部)访问
console.log(per.name, per.age, per.other)

// 2. 通过 private 声明的是私有变了
// 只能在类里面访问，因此需要在类中定义方法暴露私有变量
console.log(per.say()) //间接访问了 age 私有变量

// 3. 通过 protected 声明的是受保护的变量
// 只能在类的内部访问，或者通过在继承的子类中访问，不能在外部访问。
class Man extends Person {
    
     //继承 Person 的子类
  constructor() {
    
    
    super('man', 19, 'supplementary instruction...')
    console.log(this.other) //子类构造方法内部访问
  }
  sayOther() {
    
    
    console.log(this.other) //子类方法内部访问
  }
}
let man = new Man()
console.log(per.say()) //通过父类方法间接访问
console.log(man.sayOther()) //通过子类方法间接访问

TS static properties and static methods

Static properties and methods are properties and methods declared using the static keyword. These properties and methods can only be called through the class name and cannot be accessed in the class through this.

Note: If there are two or more static methods in the class, another static method can be called through this internally between the static methods.

// 定义类
class Person {
    
    
  name: string
  static value: string = 'hello typescript' //静态属性需要提前赋值
  constructor(name: string) {
    
    
    this.name = name
  }
  static say() {
    
    
    return this.name
  }
  static run() {
    
    
    return 'run' + this.say() //静态方法可以通过this调用另外一个静态方法
  }
}
// 调用静态属性和静态方法
console.log(Person.value)
console.log(Person.say())

TS defines classes through interface

Variables and methods are defined in classes, and the interface keyword can also be used to define variables and methods.

// 通过接口定义类方法，我的理解也就是混合类型的接口
interface IPersonClassOne {
    
    
  name: string,
  say(name: string): string //定义获取名字的方法
}
// 标准定义类的方法
class PersonClassTwo {
    
    
  age: number
  constructor() {
    
    
    this.age = 21
  }
}
// 继承接口使用 implements 关键字，如果有多个接口继承可以使用逗号 ',' 分隔开
// 继承类使用 extends 关键字
// 继承而来的属性都需要再次声明
class Person extends PersonClassTwo implements IPersonClassOne {
    
    
  name: string 
  age: number
  other: string
  constructor(){
    
    
    super()
    this.other = 'supplementary instruction...'
  }
  say(name: string){
    
    
    this.name = name
    return this.name + '|' + this.age + ', ' + this.other
  }
}
// 实例化类
let per = new Person()
console.log(per.say('xinz')) //xinz|21, supplementary instruction...

TS abstract class

An abstract class is a class that wraps an abstract method ; an abstract method refers to those methods that have only functional declarations but no functional bodies .

In other words, an abstract class is a method that wraps up methods that extract the essence of the same content from multiple things. This method does not provide specific details, it is just a concept.

For example, each animal makes different sounds, but they can all make sounds. Therefore, you can define an abstract class to wrap the function of making sounds, but you do not need to implement the details of the sounds made. This is abstraction. kind.

Only when the specific subclass inherits the abstract class, can the details of the abstract function be realized according to the idea of ​​personal customization .
The abstract class is defined by the keyword ** abstract **. It should be noted that the specific functions of the abstract method can only be implemented in subclasses (derived classes).

// 定义抽象类 和 抽象方法, 都需要在类和方法前面加关键字 abstract
abstract class sounds {
    
    
  constructor(){
    
    }
  abstract say(): string
}
// 子类实现抽象方法的具体功能
class Dog extends sounds {
    
    
  constructor(){
    
    
    super() //super() 将继承的父类拿到子类里面，之后就可以通过this访问了
  }
  say(): string {
    
    
    return 'wang wang !!!'
  }
}
class Cat extends sounds {
    
    
  constructor(){
    
    
    super()
  }
  say(): string {
    
    
    return 'miao miao !!!'
  }
}
// 执行抽象方法 只能通过子类来执行
let dog = new Dog()
let cat = new Cat()
console.log(dog.say()) //wang wang !!!
console.log(cat.say()) //miao miao !!!