1. 程式人生 > >TypeScript筆記:類(五)

TypeScript筆記:類(五)

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

如果你使用過C#或Java,你會對這種語法非常熟悉。 我們宣告一個 Greeter類。這個類有3個成員:一個叫做greeting的屬性,一個建構函式和一個 greet

方法。

你會注意到,我們在引用任何一個類成員的時候都用了 this。 它表示我們訪問的是類的成員。

最後一行,我們使用 new構造了 Greeter類的一個例項。 它會呼叫之前定義的建構函式,建立一個 Greeter型別的新物件,並執行建構函式初始化它。

  • 繼承

在TypeScript裡,我們可以使用常用的面向物件模式。 基於類的程式設計中一種最基本的模式是允許使用繼承來擴充套件現有的類。

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

這個例子展示了最基本的繼承:類從基類中繼承了屬性和方法。 這裡, Dog是一個 派生類,它派生自 Animal 基類,通過 extends關鍵字。 派生類通常被稱作 子類,基類通常被稱作 超類

因為 Dog繼承了 Animal的功能,因此我們可以建立一個 Dog的例項,它能夠 bark()和 move()

下面我們來看個更加複雜的例子。

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

這個例子展示了一些上面沒有提到的特性。 這一次,我們使用 extends關鍵字建立了 Animal的兩個子類:Horse和 Snake

與前一個例子的不同點是,派生類包含了一個建構函式,它 必須呼叫 super(),它會執行基類的建構函式。 而且,在建構函式裡訪問 this的屬性之前,我們 一定要呼叫 super()。 這個是TypeScript強制執行的一條重要規則。

這個例子演示瞭如何在子類裡可以重寫父類的方法。 Snake類和 Horse類都建立了 move方法,它們重寫了從Animal繼承來的 move方法,使得 move方法根據不同的類而具有不同的功能。 注意,即使 tom被宣告為Animal型別,但因為它的值是 Horse,呼叫 tom.move(34)時,它會呼叫 Horse裡重寫的方法:

Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 34m.
  • 公有私有受保護的修飾符

預設為public

在上面的例子裡,我們可以自由的訪問程式裡定義的成員。 如果你對其它語言中的類比較瞭解,就會注意到我們在之前的程式碼裡並沒有使用 public來做修飾;例如,C#要求必須明確地使用 public指定成員是可見的。 在TypeScript裡,成員都預設為 public

你也可以明確的將一個成員標記成 public。 我們可以用下面的方式來重寫上面的 Animal類:

class Animal {
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

private

當成員被標記成 private時,它就不能在宣告它的類的外部訪問。

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

new Animal("Cat").name; // 錯誤: 'name' 是私有的.

TypeScript使用的是結構性型別系統。 當我們比較兩種不同的型別時,並不在乎它們從何處而來,如果所有成員的型別都是相容的,我們就認為它們的型別是相容的。

然而,當我們比較帶有 private或 protected成員的型別的時候,情況就不同了。 如果其中一個型別裡包含一個private成員,那麼只有當另外一個型別中也存在這樣一個 private成員, 並且它們都是來自同一處宣告時,我們才認為這兩個型別是相容的。 對於 protected成員也使用這個規則。

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

class Rhino extends Animal {
    constructor() { super("Rhino"); }
}

class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");

animal = rhino;
animal = employee; // 錯誤: Animal 與 Employee 不相容.

這個例子中有 Animal和 Rhino兩個類, Rhino是 Animal類的子類。 還有一個 Employee類,其型別看上去與Animal是相同的。 我們建立了幾個這些類的例項,並相互賦值來看看會發生什麼。 因為 Animal和 Rhino共享了來自 Animal裡的私有成員定義 private name: string,因此它們是相容的。 然而 Employee卻不是這樣。當把 Employee賦值給 Animal的時候,得到一個錯誤,說它們的型別不相容。 儘管 Employee裡也有一個私有成員 name,但它明顯不是 Animal裡面定義的那個。

protect

protected修飾符與 private修飾符的行為很相似,但有一點不同, protected成員在派生類中仍然可以訪問。

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

class Employee extends Person {
    private department: string;

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

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // 錯誤

注意,我們不能在 Person類外使用 name,但是我們仍然可以通過 Employee類的例項方法訪問,因為Employee是由 Person派生而來的。

建構函式也可以被標記成 protected。 這意味著這個類不能在包含它的類外被例項化,但是能被繼承。比如,

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

// Employee 能夠繼承 Person
class Employee extends Person {
    private department: string;

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

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
let john = new Person("John"); // 錯誤: 'Person' 的建構函式是被保護的.

readonly修飾符

你可以使用 readonly關鍵字將屬性設定為只讀的。 只讀屬性必須在宣告時或建構函式裡被初始化。

class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 錯誤! name 是隻讀的.

引數屬性

在上面的例子中,我們必須在Octopus類裡定義一個只讀成員 name和一個引數為 theName的建構函式,並且立刻將 theName的值賦給 name,這種情況經常會遇到。 引數屬性可以方便地讓我們在一個地方定義並初始化一個成員。 下面的例子是對之前 Octopus類的修改版,使用了引數屬性:

class Octopus {
    readonly numberOfLegs: number = 8;
    constructor(readonly name: string) {
    }
}

注意看我們是如何捨棄了 theName,僅在建構函式裡使用 readonly name: string引數來建立和初始化 name成員。 我們把宣告和賦值合併至一處。

引數屬性通過給建構函式引數前面新增一個訪問限定符來宣告。 使用 private限定一個引數屬性會宣告並初始化一個私有成員;對於 public和 protected來說也是一樣。

存取器

TypeScript支援通過getters/setters來擷取對物件成員的訪問。 它能幫助你有效的控制對物件成員的訪問。

下面來看如何把一個簡單的類改寫成使用 get和 set。 首先,我們從一個沒有使用存取器的例子開始。

class Employee {
    fullName: string;
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

我們可以隨意的設定 fullName,這是非常方便的,但是這也可能會帶來麻煩。

下面這個版本里,我們先檢查使用者密碼是否正確,然後再允許其修改員工資訊。 我們把對 fullName的直接訪問改成了可以檢查密碼的 set方法。 我們也加了一個 get方法,讓上面的例子仍然可以工作。

let passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

我們可以修改一下密碼,來驗證一下存取器是否是工作的。當密碼不對時,會提示我們沒有許可權去修改員工。

對於存取器有下面幾點需要注意的:

首先,存取器要求你將編譯器設定為輸出ECMAScript 5或更高。 不支援降級到ECMAScript 3。 其次,只帶有 get不帶有 set的存取器自動被推斷為 readonly。 這在從程式碼生成 .d.ts檔案時是有幫助的,因為利用這個屬性的使用者會看到不允許夠改變它的值。

靜態屬性

到目前為止,我們只討論了類的例項成員,那些僅當類被例項化的時候才會被初始化的屬性。 我們也可以建立類的靜態成員,這些屬性存在於類本身上面而不是類的例項上。 在這個例子裡,我們使用 static定義 origin,因為它是所有網格都會用到的屬性。 每個例項想要訪問這個屬性的時候,都要在 origin前面加上類名。 如同在例項屬性上使用 this.字首來訪問屬性一樣,這裡我們使用 Grid.來訪問靜態屬性。

class Grid {
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}

let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

抽象類

抽象類做為其它派生類的基類使用。 它們一般不會直接被例項化。 不同於介面,抽象類可以包含成員的實現細節。abstract關鍵字是用於定義抽象類和在抽象類內部定義抽象方法。

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('roaming the earch...');
    }
}

抽象類中的抽象方法不包含具體實現並且必須在派生類中實現。 抽象方法的語法與介面方法相似。 兩者都是定義方法簽名但不包含方法體。 然而,抽象方法必須包含 abstract關鍵字並且可以包含訪問修飾符。

abstract class Department {

    constructor(public name: string) {
    }

    printName(): void {
        console.log('Department name: ' + this.name);
    }

    abstract printMeeting(): void; // 必須在派生類中實現
}

class AccountingDepartment extends Department {

    constructor() {
        super('Accounting and Auditing'); // 在派生類的建構函式中必須呼叫 super()
    }

    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');
    }

    generateReports(): void {
        console.log('Generating accounting reports...');
    }
}

let department: Department; // 允許建立一個對抽象型別的引用
department = new Department(); // 錯誤: 不能建立一個抽象類的例項
department = new AccountingDepartment(); // 允許對一個抽象子類進行例項化和賦值
department.printName();
department.printMeeting();
department.generateReports(); // 錯誤: 方法在宣告的抽象類中不存在
  • 高階技巧

建構函式

當你在TypeScript裡聲明瞭一個類的時候,實際上同時聲明瞭很多東西。 首先就是類的 例項的型別。

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter: Greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

這裡,我們寫了 let greeter: Greeter,意思是 Greeter類的例項的型別是 Greeter。 這對於用過其它面嚮物件語言的程式設計師來講已經是老習慣了。

我們也建立了一個叫做 建構函式的值。 這個函式會在我們使用 new建立類例項的時候被呼叫。 下面我們來看看,上面的程式碼被編譯成JavaScript後是什麼樣子的:

let Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

let greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

上面的程式碼裡, let Greeter將被賦值為建構函式。 當我們呼叫 new並執行了這個函式後,便會得到一個類的例項。 這個建構函式也包含了類的所有靜態屬性。 換個角度說,我們可以認為類具有 例項部分與 靜態部分這兩個部分。

讓我們稍微改寫一下這個例子,看看它們之間的區別:

class Greeter {
    static standardGreeting = "Hello, there";
    greeting: string;
    greet() {
        if (this.greeting) {
            return "Hello, " + this.greeting;
        }
        else {
            return Greeter.standardGreeting;
        }
    }
}

let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());

let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";

let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());

這個例子裡, greeter1與之前看到的一樣。 我們例項化 Greeter類,並使用這個物件。 與我們之前看到的一樣。

再之後,我們直接使用類。 我們建立了一個叫做 greeterMaker的變數。 這個變數儲存了這個類或者說儲存了類建構函式。 然後我們使用 typeof Greeter,意思是取Greeter類的型別,而不是例項的型別。 或者更確切的說,"告訴我 Greeter識別符號的型別",也就是建構函式的型別。 這個型別包含了類的所有靜態成員和建構函式。 之後,就和前面一樣,我們在 greeterMaker上使用 new,建立 Greeter的例項。

把類當做介面使用

如上一節裡所講的,類定義會建立兩個東西:類的例項型別和一個建構函式。 因為類可以創建出型別,所以你能夠在允許使用介面的地方使用類。

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};