This is my fourth day of the TypeScript Challenge. The front end has a certain understanding of classes when using jS. How do we understand and use TypeScript classes when we switch to TypeScript?

Basic probability and usage of class 1

1.2 Basic use of classes

Use the keyword class

Define a class that has a name attribute and a method that gets the name

class Lady {
    content = "Hi, better";
    sayHello() {
      return this.content; }}const goddess = new Lady();
  console.log(goddess.sayHello());
Copy the code

1.2 Class inheritance

class women extends Lady {
  sayLove() {
    return "I love you"; }}const goddess = new women();
console.log(goddess.sayHello());
console.log(goddess.sayLove());
Copy the code

1.3 Class overrides

class women extends Lady {
    sayLove() {
      return "I love you!";
    }
    sayHello() {
      return "Hi , honey!"; }}Copy the code

1.4 Super Keyword

This is the use of the super keyword. For example, we still want to use the words in the Lady class, but after that, we just add hello. In this case, you can use the super keyword, which represents the method in the superclass. So our code would look something like this.

class women extends Lady {
  sayLove() {
    return "I love you!";
  }
  sayHello() {
    return super.sayHello() + ". Hello!"; }}Copy the code

The access type of class 2 is based on three key fields

private protected public

class Person {
    name: string;
  }
  
  const person = new Person();
  person.name = "jspang.com";
  
  console.log(person.name);
Copy the code

2.1 Public Access properties

Public is allowed to be called both inside and outside of a class. If the name access property is not defined in the class, it will default as a public access property.

class Person {
    public name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')}}//------- the following belong to the external -------- of the class
const person = new Person()
person.name = 'better'
person.sayHello()
console.log(person.name)
Copy the code

2.2 private

Calls allowed inside the class are not allowed outside

class Person {
    private name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  // No error is reported here}}//------- the following belong to the external -------- of the class
const person = new Person()
person.name = 'better'    // This is an error
person.sayHello()
console.log(person.name)  // This is an error
Copy the code

2.3 Protected is allowed within a class and in an inherited subclass

class Person {
    protected name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  // No error is reported here}}class Teacher extends Person{
    public sayBye(){
        this.name; // No error is reported here}}Copy the code

3. Class constructor

3.1 Constructor concepts

A constructor is a method constructor that is automatically executed when a class is initialized with the keyword constructor

You want to define a name property in the Person class. The name property is not given an initial value, and you assign a value to name by passing it as an argument when the new comes out of the object

class Person{
    constructor(public name:string){}}const person= new Person('better')
console.log(person.name)
Copy the code

How to write constructors in class inheritance

Using a constructor in a subclass requires calling the superclass constructor with super()

class Person{
    constructor(public name:string){}}class Teacher extends Person{
    constructor(public age:number){
        super('better')}}const teacher = new Teacher(18)
console.log(teacher.age)
console.log(teacher.name)
Copy the code

This is the principle that subclasses inherit from the superclass and have constructors. When a constructor is written in a subclass, it must call the superclass constructor with super(), and if a value needs to be passed, it must also be passed. If the superclass does not have a constructor, the subclass must use super() to call it, otherwise it will report an error.

class Person{}

class Teacher extends Person{
    constructor(public age:number){
        super()}}const teacher = new Teacher(18)
console.log(teacher.age)

Copy the code

Getters and setters of TypeScript classes use static

Getter setters for class 4.1

For the use of class P access type private, its main function is to encapsulate a property, and then access and modify the property through the Getter Setter

For Xaiojiejie’s age is a property that can’t be casually told to others

class women {
  constructor(private _age:number){}}Copy the code

If they want to know, they have to go through the getter property, and the getter property keyword is get

class women {
  constructor(private _age:number){}
  get age() {return this._age
  }
}
 
const Alan = new women(28)

console.log(Alan.getAge)
Copy the code

The _age is private, so you can’t change it outside of that class, so you can change it using the setter

class women {
  constructor(private _age:number){}
  get age() {return this._age-10
  }
  set age(age:number) {this._age=age
  }
}

const Alan = new women(28)
Alan.age=25
console.log(Alan.age)
Copy the code

4.2 Static in a class

In general, to use an instance of this class, you have to use New ()

class Girl {
  sayLove() {
    return "I Love you"; }}const girl = new Girl();
console.log(girl.sayLove());
Copy the code

However, if you want to use this method instead of new, TypeScript gives you a quick way to use static properties and methods without having to declare the object.

class Girl {
  static sayLove() {
    return "I Love you"; }}console.log(Girl.sayLove());
Copy the code