【Angular】TypeScript class

用法

  • 列別名稱通常用「大駝峰式命名」
  • 函數與變數通常用「小駝峰式命名」
class 類別名 {
    訪問修飾符 屬性名: 型別=値;

    constructor(參數: 型別) {
        this.屬性名2='屬性名2'; //這行可以透過private 建構子參數省略不寫
    }

    函數(參數: 型別): 回傳値型別{
        console.log(this.屬性名='屬性名');
    }
}

訪問修飾符的種類

  1. public
    外部可存取,無指定訪問修飾符時為default設定
  2. protected
    原生類別或派生類別可存取
  3. private
    僅限原生類別可存取

※TypeScript最終還是JavaScript,指定訪問修飾符可以讓開發時檢查程式碼,如果硬要無視他,仍然可以執行。

範例

//定義類別
class Animal { 

    // 屬性名
    age: number = 10;

    // 建構子
    constructor(private isCry: boolean, private legs: number) {
        //這邊參數用private代表默認代入↓
        //this.isCry=isCry;
    }

    // 函數
    cry(): void {
        if (this.isCry) { 
            console.log(`legs: ${this.legs}`)
        }
    }

}

//使用類別
let dog = new Animal(true, 4);
//因為有定義函數
dog.cry(); //'legs: 4';

getter / setter

class Animal {
    private _age: number = 10;

    //取得上方private _age的值
    get age(): number {
        //除了取得值以外也可以進行處理
        // console.log(this._age);

        return this._age;
    }

    //要用跟getter相同的method名
    set age(value: number) {
        //除了取得值以外也可以進行處理
        // console.log(this._age);

        if (value < 0) { throw new Error('age cannot > 10')
        }
        this._age = value; //設定_age的值
    }
}

let dog = new Animal();
console.log(dog.age); //dog.age=10;
dog.age = 11; //set dog.age=11;

繼承

以舊有class為基礎,定義新的class

建構新的Method

class Animal{
    age: number = 10;

    constructor(private isCry: boolean, private legs: number) {
        
    }

    cry(): void {
        if(this.isCry) {
            alert('legs: ' + this.legs);
        }
    }
}

// あるクラスを基に別のクラスを定義することは継承と言います
// Animalクラスを継承してしてDogクラスを定義する
class Dog extends Animal {
    cry(): void {
        if (this.isCry) {
            alert('bow, wow!');
        }
    }
}

let dog = new Dog(true, 4);
dog.cry();

沿用舊有Method

class Animal{
    age: number = 10;

    constructor(private isCry: boolean, private legs: number) {
        
    }

    cry(): void {
        if(this.isCry) {
            alert('legs: ' + this.legs);
        }
    }
}

class Dog extends Animal {

    // constructor() {
           //也可以用super定義constructor的繼承
    //     super();
    // }

    cry(): void {

        // 親のクラスにアクセスためのOBJです
        super.cry();
        //処理を追加することも可能です
        console.log('hello!');
    }
}

let dog = new Dog(true, 4);
dog.cry();