TypeScript基礎入門 - 類 - 繼承

轉載

TypeScript基礎入門 - 類 - 繼承

項目實踐倉庫

https://github.com/durban89/typescript_demo.git
tag: 1.1.0

爲了保證後面的學習演示須要安裝下ts-node，這樣後面的每一個操做都能直接運行看到輸出的結果。

npm install -D ts-node

後面本身在練習的時候能夠這樣使用

npx ts-node 腳本路徑

類

繼承

在TypeScript裏，咱們可使用經常使用的面向對象模式。 基於類的程序設計中一種最基本的模式是容許使用繼承來擴展示有的類。看下面的例子：

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

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

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

運行後獲得以下結果

$ npx ts-node src/classes_2.ts
Woof........!
Animal moved 3m
Woof........!

這個例子展現了最基本的繼承：類從基類中繼承了屬性和方法。這裏，Dog是一個派生類，它派生自Animal基類，經過extends關鍵字。派生類一般被稱做 子類，基類一般被稱做超類。

由於Dog繼承了Animal的功能，所以咱們能夠建立一個Dog的實例，它可以 bark()和move()。下面咱們來看個更加複雜的例子。

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

    move(distanceMeter: number = 0) {
        console.log(`${this.name} moved ${distanceMeter}m`);
    }
}

class Snake extends Animal {
    constructor(name: string) {
        super(name);
    }

    move(distanceMeter: number = 5) {
        console.log('滑動的聲音......');
        super.move(distanceMeter);
    }
}

class Horse extends Animal {
    constructor(name: string) {
        super(name);
    }

    move(distanceMeter: number = 45) {
        console.log('跑動的聲音......');
        super.move(distanceMeter);
    }
}

const snake = new Snake('small snake');
const horse: Animal = new Horse('small horse');

snake.move();
horse.move(152);

運行後獲得以下結果

$ npx ts-node src/classes_2.ts
滑動的聲音......
small snake moved 5m
跑動的聲音......
small horse moved 152m

這個例子展現了一些上篇文章【TypeScript基礎入門 - 類 - 簡介】沒有提到的特性。 這一次，咱們使用extends關鍵字建立了 Animal的兩個子類：Horse和 Snake。

與前一個例子的不一樣點是，派生類包含了一個構造函數，它必須調用super()，它會執行基類的構造函數。 並且，在構造函數裏訪問this的屬性以前，咱們必定要調用 super()。 這個是TypeScript強制執行的一條重要規則。

這個例子演示瞭如何在子類裏能夠重寫父類的方法。Snake類和 Horse類都建立了move方法，它們重寫了從Animal繼承來的move方法，使得 move方法根據不一樣的類而具備不一樣的功能。注意，即便horse被聲明爲Animal類型，但由於它的值是Horse，調用tom.move(152)時，它會調用Horse裏重寫的方法。

本實例結束實踐項目地址

https://github.com/durban89/typescript_demo.git
tag: 1.1.1