TypeScript Sampleをやってみるその９


## はじめに
TypeScriptの[クラス](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%B9_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF))と[継承](https://ja.wikipedia.org/wiki/%E7%B6%99%E6%89%BF_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0))のサンプルを投稿します。
派生クラスは[スーパーコール](https://qiita.com/BumpeiShimada/items/938cdee35d0a213434a3)を行います。
サンプルはシンプルという名称の単純なサンプルです。
クラス、[サブクラス](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%96%E3%82%AF%E3%83%A9%E3%82%B9)、継承、スーパーコール、[オブジェクト指向](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91)でよく見かけるキーワードです。
恐れることはなにもないです。
この世界を構成するすべてのオブジェクトもまたクラス、サブクラス、継承から誕生していることに気が付くと世界感が変わります。
オブジェクト指向の考え方を身に付けると、「これはあれの派生クラスか」みたいな会話をするようになるかも。
## 前提
* [Visual Studio Code](https://code.visualstudio.com/download)がインストール済み
* [Node.js/npm](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)がインストール済み
* gitから[Sampleをダウンロードして](https://github.com/Microsoft/TypeScriptSamples/archive/master.zip)任意のディレクトリに解凍済み
* OSはWindows7/10を想定

## サンプル simple
派生クラスのスーパーコールサンプル。

## ファイル構成
|パス|ファイル名|説明|
|:--|:--|:--| 
|.|animals.js|animals.tsのコンパイルにて作成されたJavaScriptファイル|
|.|animals.js.map|animals.tsのコンパイルにて作成されたmapファイル|
|.|animals.ts|動物クラスと継承クラスのTypeScriptファイル|
|.|README.md|このサンプルの説明と使用方法|
|.|tsconfig.json|TypeScriptのコンパイルコンフィグファイル|
## クラス図
![TS_045.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/2b1d8fd0-6ae9-6378-711a-48d414693ae8.jpeg)
>
へびクラスもうまクラスも動物クラスから植物と動物の違いである「移動(move)」を継承していることをクラス図は物語っています。
プログラムでは、動物クラスのmove()をスーパーコールーします。
>

## 実行
```
cd .animals
tsc --sourcemap animals.ts
node animals.js
```
## 結果
![TS_046.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/957b1b06-dc8e-7b2d-c26e-783e2761c400.jpeg)
>
へび(Python)のサーミーはスライディングで5m移動
うま(Palomino)のトミーはギャロップで45m移動
>

## コード
### animals.ts
``` TypeScript
class Animal {
    constructor(public name) { }
    move(meters) {
        console.log(this.name + " moved " + meters + "m.");
    }
}

class Snake extends Animal {
    move() {
        console.log("Slithering...");
        super.move(5);
    }
}

class Horse extends Animal {
    move() {
        console.log("Galloping...");
        super.move(45);
    }
}

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

sam.move()
tom.move(34)

```
>
- 動物クラスのコンストラクターで名前を引数で受け取る
- へびクラスのmove()メッソドは動物クラスのmove()メッソドを引数5でスーパーコール
- うまクラスのmove()メッソドは動物クラスのmove()メッソドを引数45でスーパーコール
- tom.move(34)と34を引数で指定するも、うまクラスのmove()は引数を指定していないので出力に反映しない
>

## ポイント
派生クラスは親となるクラスを `extends` と `super` でそっくり自己のメッソドとして使用可能となります。

## ノート
神になった気分で「人間クラス(Human)」を追加してみました。
ちゃんと移動距離を引数定義しました。
### 改修ソース
``` TypeScript:animals.ts改
class Animal {
    constructor(public name) { }
    move(meters) {
        console.log(this.name + " moved " + meters + "m.");
    }
}

class Snake extends Animal {
    move() {
        console.log("Slithering...");
        super.move(5);
    }
}

class Horse extends Animal {
    move() {
        console.log("Galloping...");
        super.move(45);
    }
}

class Human extends Animal {
    move(meters) {
        console.log("Warlking...");
        super.move(meters);
    }
}

var sam = new Snake("Sammy the Python")
var tom: Animal = new Horse("Tommy the Palomino")
var poo: Animal = new Human("Pooshikin the Mankaind")

sam.move()
tom.move(34)
poo.move(10)

```
```
Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 45m.
Warlking...
Pooshikin the Mankaind moved 10m.
```

## まとめ
TypeScriptの最大の功績はクラスをコーディングする道を開いたことです。
「求めよ若者よ、道は開かれる」
どしどしクラス作りに励みましょう。

以上、おそまつ