typescript之class

356 阅读1分钟

typescript中原生支持用class的方式声明一个类,简单例子

基本例子

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

const person = new Person('xiaohong', 18)

继承

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

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

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

const teacher = new Teacher()
teacher.eat()  // 吃饭
teacher.teach()  //教书

class公共成员

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

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

class私有成员

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

class Person {
  private name = 'person'
}

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

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

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

class Person {
  _name = 'person'
  get name() {
    return this._name
  }
  set name(val) {
    this.name = val
  }
}

const person = new Person()
person.name = 'xiaohong'
console.log(person.name)  //小红

受保护成员

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

class Person {
  protected name = 'person'
}

class Teacher extends Person{
  getName(){
    return this.name
  }
}

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

只读属性

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

class Person {
  readonly name = 'person'

  setName(){
    console.log(this.name) //person
    this.name = 'person1' //报错
  }
}

const person  = new Person()
console.log(person.name); //person
person.name = 'person1'//报错

静态属性

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()