TS之類的繼承

1.定義類

// ts中定義類和方法
class Person {
  name: string;      
  constructor(n: string) {   //構造函數，實例化類的時候觸發的方法
    this.name = n;
  }

  run(): void {
    console.log(this.name);
  }
}

class Person1 {
  name: string;      
  constructor(name: string) {   //構造函數，實例化類的時候觸發的方法
    this.name = name;
  }


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

let p1 = new Person1('李四');
console.log(p1.getName());
p1.setName('王五');
console.log(p1.getName());

2.TS中實現繼承（extends、super）

// 父類
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  run(): string {
    return `${this.name}在奔跑`;
  }
}

let p = new Person('張三');
console.log(p.run());

// 子類Web繼承父類Person
class Web extends Person {

  constructor(name: string) {
    super(name);   // 表示調用父類的構造函數
  }

}

let w = new Web('李四');
console.log(w.run());

 

注意的是：如果子類和父類中有相同的方法名，則父類的方法被覆蓋

3.類里面的修飾符

typescript里面定義屬性的時候給我們提供了三種修飾符：

• public：公有                    在當前類里面、子類、類外面都可以訪問
• protected：保護類型       在當前類里面、子類可以訪問，類外部無法訪問
• private：私有                  不能在聲明它的類的外部訪問

如果不加修飾符，默認就是公有

（1）public

// 父類
class Person {
  public name: string;    // 公有屬性

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

  run(): string {
    return `${this.name}在奔跑`;
  }
}

// 子類Web繼承父類Person
class Web extends Person {

  constructor(name: string) {
    super(name);   // 表示調用父類的構造函數
  }

  work() {
    console.log(`${this.name}在工作`);
  }
}

// 子類訪問name
let w = new Web('李四');
w.work();

// 類外部訪問name
let p = new Person('XXX');
console.log(p.name);

 

（2）protected

// 父類
class Person {
  protected name: string;    // 保護屬性

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

// 子類Web繼承父類Person
class Web extends Person {

  constructor(name: string) {
    super(name);   // 表示調用父類的構造函數
  }

  work() {
    console.log(`${this.name}在工作`);
  }
}

// 子類訪問name ：可以訪問
let w = new Web('李四');
w.work();

// 類外部訪問name
let p = new Person('XXX');
console.log(p.name);  // 報錯

 

此時如果打印父類里面的保護屬性會出現如下報錯：

 

 （3）private

// 父類
class Person {
  private name: string;    // 私有屬性

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

}

// 子類Web繼承父類Person
class Web extends Person {

  constructor(name: string) {
    super(name);   // 表示調用父類的構造函數
  }

  work() {
    console.log(`${this.name}在工作===protected`);
  }
}

// 子類訪問name ：可以訪問
let w = new Web('李四');
w.work();

 

此時在子類中已經無法訪問父類中的屬性，會出現如下報錯：