typescript class篇

(小白学习之class篇，请多指教)

ts中原生支持用class的方式声明一个类

基本🌰

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

const xiong = new Person('xiong',18)
console.log(xiong)

继承

class的继承只需要通过关键字extends即可实现继承

class Person {
  eat() {
    console.log('吃饭')
  }
 }

class Teacher extends Person {
  teach(){
    console.log('教学')
  }
}  

const xiong = new Teacher()
xiong.teach() //教学
xiong.eat() //吃饭

class公共成员

ts中，class的属性默认是公共属性，省略了public修饰符，公共成员在外部或者子类都可以读写

class Person {
   public name = 'person'
 }
 
const xiong = new Person()
console.log(xiong.name) // person

class私有成员

ts中，class的私有成员通过private修饰符声明，私有成员只能在class内部使用，外部或者继承的类中无法使用

class Person {
   private name = 'person'
 }
const xiong = new Person()
console.log(xiong.name) //报错
 
class Teacher extend Person {
  teach() {
    console.log(this.name)  //报错
  }
}

在某些情况下，我们需要对私有数据进行读写的时候，可以采用get、set的方式实现

class Person {
   private name = 'person'
  get() {
    return this.name
  }
  set(val) {
    this.name = val
    console.log('this.name',this.name)
  }
 }

const xiong = new Person()
console.log(xiong.get()) // person
console.log(xiong.set('baby')) // baby

受保护成员

ts中，class通过protected修饰符来声明受保护成员，与私有成员类似（可以在class内部使用），但是不同的是，受保护成员还可以在继承的子类中使用

class Person {
   protected name = 'person'
 }
 
const xiong = new Person()
console.log(xiong.name) // 报错

class Teacher extends Person {
  teach() {
    console.log(this.name) //person
  }
}

只读属性

ts中，class通过readonly关键字来声明只读属性，只读属性只能取值不能修改，无论是在class内部还是外部

class Person {
   readonly name = 'person'
  setName() {
    console.log(this.name) //person
    this.name = 'changeName' //报错
  }
 }

const xiong = new Person()
console.log(xiong.name) // person
xiong.name = 'changeName' //报错
 

静态属性

ts中，class通过static修饰符来声明静态属性，静态成员只能通过class本身调用，而不是实例

class Person {
  static job = "person";

  consoleJob() {
    console.log(this.job); //报错
    console.log(Person.job); //person
  }
}

const person = new Person();
console.log(person.job); //报错
console.log(Person.job); //person
person.consoleJob();