iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

前端是該來學一下 TypeScript 了 系列 第 25

Day25 :【TypeScript 學起來】Class 的繼承、修飾符、abstract、static

  • 分享至 

  • xImage
  •  

今天繼續筆記class,剩最後5天了!
若有錯誤,歡迎留言指教,感恩的心。


extends 繼承

這個跟JavaScript相同, 使用 extends 繼承類別, 建立子類別,子類別可以使用父層的東西。如下例子,依不同參數型別來使用父層的method greet。

class Base {
  greet() {
    console.log("Hello, world!");
  }
}
 
class Derived extends Base {
  greet(name?: string) {
    if (name === undefined) {
      super.greet();
    } else {
      console.log(`Hello, ${name.toUpperCase()}`);
    }
  }
}
 
const a = new Derived();
a.greet(); //Hello, world!
a.greet("reader"); //Hello, READER

Public & Private & Protected

TypeScript 可以使用三種訪問修飾符(Access Modifiers),分別是 public、private 和 protected。

  • 都沒寫的話,預設值為 public
  • public 修飾的屬性或方法是公有的,可以在任何地方被訪問到,預設所有的屬性和方法都是 public 的
  • private 修飾的屬性或方法是私有的,不能在宣告它的類別的外部訪問
  • protected 修飾的屬性或方法是受保護的,它和 private 類似,區別是它在子類別中也是允許被訪問的
class Person {
  public name: string; //公有
  protected age: number; //受保護的
  private phone: number; //私有

  constructor(name: string, age: number, phone: number) {
    this.name = name;
    this.age = age;
    this.phone = phone;
  }
  getName(): string {
    return this.name;
  }
  setName(name: string): void {
    this.name = name;
  }
}
class Child extends Person {
  constructor(name: string, age: number, phone: number) {
    super(name, age, phone);
  }
  desc() {
    console.log(`${this.name}${this.age}${this.phone}`);
    // phone 為私有屬性, 只能在 Person class 裡面使用
  }
}
let child = new Child("iris", 18, 0912345678);
console.log(child.name);
console.log(child.age); //只能在Person及子類別裡面使用 error: Property 'age' is protected and only accessible within class 'Person' and its subclasses.
console.log(child.phone); //只能在class Person裡使用 error: Property 'phone' is private and only accessible within class 'Person'.


private constructor

該類別不允許被繼承或者實例化:

class Person2 {
    public name:string;
    private constructor (name:string) {
        this.name = name;
  }
}
class Child2 extends Person2 {  //無法被繼承 error: Cannot extend a class 'Person2'. Class constructor is marked as private.
    constructor (name) {
        super(name);
    }
}

let a2 = new Child2('iris');

protected constructor

允許在子類別中使用:

class Person3 {
    public name:string;
    protected constructor (name:string) {
        this.name = name;
  }
}
class Child3 extends Person3 {  
    constructor (name:string) {
        super(name);
        console.log(name);
    }
}

let a3 = new Child3('iris');
console.log(a3); //Child3 { name: 'iris' }

Abstract 抽象

abstract 用於定義抽象類別和其中的抽象方法。

抽象類別是不允許被實例化的,下面例子我們定義了抽象類別 Animal,並且定義了一個抽象方法 sayHi。在實例化抽象類別的時候報錯了。:

abstract class Animal {
  public name;
  public constructor(name:string) {
      this.name = name;
  }
  public abstract sayHi(): void;
}

let b = new Animal('Tom'); //error: Cannot create an instance of an abstract class.

抽象類別中的抽象方法必須被子類別實現:

abstract class Animal2 {
  public name;
  public constructor(name:string) {
      this.name = name;
  }
  public abstract sayHi():void;
}

class Cat extends Animal {
  public sayHi() {
      console.log(`Meow, My name is ${this.name}`);
  }
}

let cat = new Cat('Tom');

static

使用 static 修飾符修飾的方法稱為靜態方法,它們不需要實例化,而是直接透過類別來呼叫:

class Animal3 {
    public name;
    public constructor(name:string) {
        this.name = name;
    }
    static isAnimal(c:object) {
        return c instanceof Animal;
    }
}

let c = new Animal3('Tom');
let d = Animal3.isAnimal(c); 
console.log(d); //true
c.isAnimal(c); //c.isAnimal is not a function

可以搭配 public 、 protected 和 private 一起使用

class MyClass {
  private static x = 0;
}
console.log(MyClass.x); //error:Property 'x' is private and only accessible within class 'MyClass'.

static 也能夠繼承

class Base2 {
  static getGreeting() {
    return "Hello world";
  }
}
class Derived2 extends Base2 {
  myGreeting = Derived2.getGreeting();
}

let derived2 = new Derived2();
console.log(derived2);

今天是個有意義的日子,天氣好好
感謝閱讀,明天見~


參考資料

https://willh.gitbook.io/typescript-tutorial/advanced/class
https://www.typescriptlang.org/docs/handbook/2/classes.html


上一篇
Day24 :【TypeScript 學起來】TypeScript 中使用 Class
下一篇
Day26 :【TypeScript 學起來】Class 與 Interface 的使用
系列文
前端是該來學一下 TypeScript 了 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言