TypeScript 中類的概念和使用

• 類的基本使用

class Lady {
  content = "Hi";
  sayHello() {
    return this.content;
  }
}

const goddess = new Lady();
console.log(goddess.sayHello());

• 類的繼承

class Lady {
  content = "Hello";
  sayHello() {
    return this.content;
  }
}
class XiaoJieJie extends Lady {
  sayHi() {
    return "Hi";
  }
}

const goddess = new XiaoJieJie();
console.log(goddess.sayHello());
console.log(goddess.sayLove());

• 類的重寫

class XiaoJieJie extends Lady {
  sayHello() {
    return "Hello";
  }
  sayHi() {
    return "Hi!";
  }
}

• super 關(guān)鍵字的使用

class XiaoJieJie extends Lady {
  sayHi() {
    return "Hi!";
  }
  sayHello() {
    return super.sayHello() + "。你好！";
  }
}

TypeScript 中類的訪問類型

類中的訪問類型:private、protected、public

• 簡單的類

class Person {
  name: string;
}

const person = new Person();
person.name = "Nancy";

console.log(person.name);

• public 訪問屬性

class Person {
    name:string;
}

//等價于
class Person {
    public name:string;
}

public從英文字面的解釋就是公共的或者說是公眾的，在程序里的意思就是允許在類的內(nèi)部和外部被調(diào)用.

比如我們在類內(nèi)調(diào)用，我們在寫一個sayHello的方法，代碼如下：

class Person {
    public name:string;
    public sayHello(){
        console.log(this.name + ' say Hello')//屬于內(nèi)部調(diào)用 
    }
}

類的外部

class Person {
    public name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')
    }
}
//-------以下屬于類的外部--------
const person = new Person()
person.name = 'Nancy'
person.sayHello()
console.log(person.name)

• private 訪問屬性

private 訪問屬性的意思是，只允許再類的內(nèi)部被調(diào)用，外部不允許調(diào)用

class Person {
    private name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此處不報錯
    }
}
//-------以下屬于類的外部--------
const person = new Person()
person.name = 'Nancy'    //此處報錯
person.sayHello()
console.log(person.name)  //此處報錯

• protected 訪問屬性

protected 允許在類內(nèi)及繼承的子類中使用

class Person {
    protected name:string;
    public sayHello(){
        console.log(this.name + 'say Hello')  //此處不報錯
    }
}

class Teacher extends Person{
    public sayBye(){
        this.name;
    }
}

這時候在子類中使用this.name是不報錯的。

TypeScript 類的構(gòu)造函數(shù)

• 類的構(gòu)造函數(shù)

構(gòu)造函數(shù)的關(guān)鍵字是constructor

class Person{
    public name :string ;
    constructor(name:string){
        this.name=name
    }

}

const person= new Person('Nancy')
console.log(person.name)

更簡單的寫法

class Person{
    constructor(public name:string){
    }
}

const person= new Person('Nancy')
console.log(person.name)

• 類繼承中的構(gòu)造器寫法

在子類中使用構(gòu)造函數(shù)需要用super()調(diào)用父類的構(gòu)造函數(shù)。

class Person{
    constructor(public name:string){}
}

class Teacher extends Person{
    constructor(public age:number){
        super('Nancy')
    }
}

const teacher = new Teacher(20)
console.log(teacher.age)
console.log(teacher.name)

這就是子類繼承父類并有構(gòu)造函數(shù)的原則，就是在子類里寫構(gòu)造函數(shù)時，必須用super()調(diào)用父類的構(gòu)造函數(shù)，如果需要傳值，也必須進(jìn)行傳值操作。就是在父類沒有構(gòu)造函數(shù)，子類也要使用super()進(jìn)行調(diào)用，否則就會報錯。

class Person{}

class Teacher extends Person{
    constructor(public age:number){
        super()
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)

TypeScript 類的 Getter、Setter 和 static 使用

• 類的 Getter 和 Setter

要使用訪問類型private

class Xiaojiejie {
  constructor(private _age:number){}
}

如果外面想要獲取age ，就必須通過getter屬性知道

class Xiaojiejie {
  constructor(private _age:number){}
  get age(){
      return this._age//此處的_age可以單獨(dú)再進(jìn)行處理 例如： return this._age - 10 
  }
}

const xjj = new Xiaojiejie(28)

console.log(xjj.getAge)

類的外部就沒辦法改變，所以這時候可以用setter屬性進(jìn)行改變

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

const xjj = new Xiaojiejie(28)
xjj.age=25
console.log(xjj.age)

setter可以保護(hù)私有變量的

• 類中的 static

想使用這個類的實(shí)例，就要先New出來（）,但是也可以不用new 例如

class Girl {
  say() {
    return "123456789";
  }
}

const girl = new Girl();
console.log(girl.say());

//可以寫成

class Girl {
  static say() {
    return "123456789";
  }
}
console.log(Girl.sayLove());

• 類的只讀屬性和抽象類

class Person {
    public readonly _name :string;
    constructor(name:string ){
        this._name = name;
    }
}

const person = new Person('Nancy')
person._name= 'Nancy123'
console.log(person._name) //報錯

• 抽象類

抽象類的關(guān)鍵詞是abstract,里邊的抽象方法也是abstract開頭的

abstract class Girl{
    abstract skill()  //因?yàn)闆]有具體的方法，所以我們這里不寫括號

}

class Girl1 extends Girl{
    skill(){
        console.log('111111')
    }
}

class Girl2 extends Girl{
    skill(){
        console.log('222222')
    }
}