天天看點

《TypeScript》 - 類

TypeScript 是面向對象的 JavaScript。

類描述了所建立的對象共同的屬性和方法。

TypeScript 支援面向對象的所有特性,比如 類、接口等。

TypeScript 類的定義與執行個體化

TypeScript 類定義方式如下:

class class_name { 
    // 類作用域
}      

執行個體化方式如下:

var object_name = new class_name([ arguments ])      

定義類的關鍵字為 class,後面緊跟類名,類可以包含以下幾個子產品(類的資料成員):

  • 字段 − 字段是類裡面聲明的變量。字段表示對象的有關資料。
  • 構造函數 − 類執行個體化時調用,可以為類的對象配置設定記憶體。
  • 方法 − 方法為對象要執行的操作。

通路控制修飾符

TypeScript 中,可以使用通路控制符來保護對類、變量、方法和構造方法的通路。TypeScript 支援 3 種不同的通路權限。

  • public(預設) : 公有,可以在任何地方被通路。
  • protected : 受保護,可以被其自身以及其子類和父類通路。
  • private : 私有,隻能被其定義所在的類通路。

代碼示例:

class Person {
    // 字段
    private age: number;

    // 構造函數 
    constructor(age:number) { 
        this.age = age; 
    }  
    
    // 方法
    public setAge(age:number):void {this.age = age;};
    public getAge():number {return this.age};
}

let personA = new Person(18);
console.log(personA.getAge()); // 18

personA.setAge(27);
console.log(personA.getAge()); //27      

static 關鍵字

static 關鍵字用于定義類的資料成員(屬性和方法)為靜态的,靜态成員可以直接通過類名調用。

代碼示例:

class Person {
    static uname: string = 'zzh';

    static printName(): void {
        console.log(this.uname);
    }
}

console.log(Person.uname); // zzh
Person.printName(); //zzh      

類的繼承

TypeScript 支援繼承類,即我們可以在建立類的時候繼承一個已存在的類,這個已存在的類稱為父類,繼承它的類稱為子類。

類繼承使用關鍵字 extends,子類除了不能繼承父類的私有成員(方法和屬性)和構造函數,其他的都可以繼承。

TypeScript 一次隻能繼承一個類,不支援繼承多個類,但 TypeScript 支援多重繼承(A 繼承 B,B 繼承 C)。

文法格式如下:

class child_class_name extends parent_class_name      

繼承類的方法重寫

class Person {
    // 字段
    private age: number;

    // 構造函數 
    constructor(age:number) { 
        this.age = age; 
    }  
    
    // 方法
    public setAge(age:number):void {this.age = age;};
    public getAge():number {return this.age};
}

let personA = new Person(18);
console.log(personA.getAge()); // 18

personA.setAge(27);
console.log(personA.getAge()); //27

// 類的繼承
class Student extends Person {
    // 方法重寫
    public setAge(age: number): void { 
        super.setAge(age + 100); // 調用父類的函數;
        console.log('重寫父類方法');
    }
}

let studentA = new Student(18);
console.log(studentA.getAge()); // 18

studentA.setAge(18);
console.log(studentA.getAge()); // 118      

類和接口

interface Car {
    name:string;
    color: string;
    run(): void;
}

class BMW implements Car {
    name:string = '寶馬一号';
    color:string = '紅色';
    run():void {
        console.log('寶馬正在路上跑~~~~')
    }
}

var bmw1 = new BMW();
console.log(bmw1.name); // 寶馬一号
console.log(bmw1.color); // 紅色
bmw1.run(); // 寶馬正在路上跑~~~~      

繼續閱讀