Typescript基礎(3)——類

前言

今天繼續typescript的學習，開始ts類的學習。

類

類的實現

在ES6中新增了類的概念。我們先看ES6中類的實現。

class Person {
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  getName(){
    return this.name;
  }
}
let p1 = new Person('小張',24)
console.log(p1.getName())

在ts中類的定義。ts中類的定義跟ES6差別不大。只是ts中新增了對屬性的類型的校驗。因此我們在使用屬性之前必須先定義屬性的類型。比如下麵Person類中的name和age屬性。在constructor和getName中使用之前必須先指定其類型。

class Person {
  // 指定參數類型
  name:string;
  age:number;
  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }

  getName():string{
    return this.name;
  }

}

let p1 = new Person('小紅',24)
console.log(p1.getName())

類的繼承

ES6中的繼承:在ES6中通過extends和super來實現繼承。

// ES6中的繼承
class Student extends Person{
  constructor(name,age,sex){
    super(name,age);
    this.sex = sex;
  }
  getSex(){
    return this.sex
  }
}

let s = new Student('小李',25,'男')
console.log(s.getName())
console.log(s.getSex())

ts中類的繼承和ES6中非常相似。

class Person {
  // 指定參數類型
  name:string;
  age:number;
  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }

  getName():string{
    return this.name;
  }

}

let p1 = new Person('小紅',24)
console.log(p1.getName())

// 類的繼承
class Student extends Person{
  sex:string;
  constructor(name:string,age:number,sex:string){
    super(name,age);
    this.sex = sex;
  }
  getSex():string{
    return this.sex
  }
}

修飾符

在ts中定義屬性的時候，提供了三種修飾符。分別是public,protected和private。這三種修飾符用來表示屬性能夠被訪問的範圍。

public    表示公有的 可以在類中，類外面，子類中被訪問。

protected  表示被保護的類型 可以在類中和子類中被訪問。不能在類外面被訪問。

private 表示私有類型 可以在類中訪問。在子類和類外部都無法訪問。

1.public、protected和private修飾符定義的屬性在類內部都可以被訪問。

class Human {
  // 指定參數類型
 public name:string;
 protected age:number;
 private salary:string;
  constructor(name:string,age:number,salary:string){
    this.name = name;
    this.age = age;
    this.salary = salary;
  }
  getName():string{
    return this.name;
  }
  getAge():number{
    return this.age;
  }
  getSalary():string{
    return this.salary;
  }
}

2.public修飾符定義的屬性在類外部可以被訪問。protected和private修飾符定義的屬性在類外部無法被訪問。
當我們在外部訪問privagte定義的屬性時，會出現報錯。
這裡的salary是private修飾的屬性，無法進行設置。

let h2 = new Person('小紅',24,10000) // Expected 2 arguments, but got 3.
console.log(h1.getAge()); // 報錯 protected修飾的age屬性無法在外部被訪問。

3.public和protected修飾符定義的屬性可以在子類中被訪問。但是private修飾符定義的屬性無法在子類中訪問。
比如，當子類繼承父類。調用super()方法時，如果傳入了父類中私有的屬性那麼會報錯。如果在子類方法中想要獲取父類
私有屬性也會報錯。

class People extends Person{
  constructor(name:string,age:number,sex:string){
    super(name,age,sex);  // 報錯
  }
  getSex():string{
    return this.sex;  // 報錯
  }
}

readonly修飾符
在ts中還提供了readonly修飾符來將屬性設置為只讀。只讀屬性必須在生明時或者構造函數中被初始化。

class Teacher {
  readonly name:string;
  constructor(name:string){
    this.name = name;
  }
  getName():string{
    return this.name
  }
}

let t = new Teacher('張三')
console.log(t.name);
console.log(t.getName());
t.name = '李四'  // 修改readonly 修飾的屬性時報錯。

靜態方法

在ES6中，所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為“靜態方法”。

class Foo{
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  getName(){
    return this.name;
  }
  static getAge(){
    return this.age;
  }
}

let f  = new Foo('劉亦菲',24);
console.log(f.getName())  // 劉亦菲
console.log(Foo.getAge()) // undefined 這裡的this指的是類Foo
console.log(f.getAge()) // 靜態方法無法被實例調用

ts中靜態方法的使用:通過使用static關鍵字定義靜態屬性和靜態方法。
靜態屬性和靜態方法只能通過類名來進行訪問。實例和this都無法進行訪問。

// 靜態方法
class Foo{
  // 靜態屬性
  static obj = {
    name:'劉亦菲',
    age:30
  }
  public name:string
  constructor(name:string){
    this.name = name;
  }
  // 靜態方法
  static getAge(){
    // 調用靜態屬性時需要使用類來調用。
    return Foo.obj.age
  }
  getName(){
    return this.name
  }
}

let f = new Foo('曉明')
console.log(Foo.getAge())  // 調用靜態方法
console.log(f.getName())  // 調用實例方法

抽象類

抽象類是作為其他繼承類的基類使用。他們一般不會被實例化。在ts中用abstract定義抽象類和抽象方法。

abstract class Animal{
  abstract eat():any;
}

1.抽象類無法被實例化

abstract class Animal{
  abstract eat():any;
}
let a = new Animal() // 報錯Cannot create an instance of an abstract class

2.抽象類中的抽象方法，不包含具體實現。只定義方法簽名，不定義方法體。

abstract class Animal{
  abstract eat():any; // 只有方法名，沒有方法體
  abstract play:any{} // 報錯  抽象方法不能有實現，也就是說不能有方法體。
}

3.抽象類的子類必須實現抽象類中的抽象方法。

// 抽象類
abstract class Animal{
  protected food:string;
  protected ball:string;
  constructor(food:string,ball:string){
    this.food = food;
    this.ball = ball;
  }
  abstract eat():any;
  abstract play():any;
}

// 子類
class Dog extends Animal{
  constructor(food:string,ball:string){
    super(food,ball)
  }
  // 必須實現抽象類中的抽象方法
  eat(){
    console.log(`小狗在吃${this.food}`)
  }
  play(){
    console.log(`小狗在玩${this.ball}`)
  }
}

let dog = new Dog('骨頭','籃球')
dog.eat()
dog.play()