基礎からのTypeScript［インターフェース⑴］

外資系企業でソフトウェアエンジニアをしております、タロイモと言います。今日もよろしくお願いします。

TypeScriptの文法について解説しています。
今回は第四回としてTypeScriptのインターフェースを説明していきます。

1. インターフェースとは

インターフェースは、型定義やクラスだけではできないことを可能にする機能です。

例えば、インターフェースで型定義&メンバ定義を行うことで特定のメンバを必ずクラスに含まなくてはいけなくすることができます。

オブジェクト指向プログラミングでは継承がよく使われますが、その継承は単一継承（1つのクラスだけ継承することができる）なことが多いです。単一継承では複数のクラスを継承することができないので不便なことが多いのですが、TypeScriptではクラスの多重継承が禁止されています。多重継承ができないのはメソッド名の重複など複雑性が増し、色々と問題を引き起こすからです。インターフェースは多重継承を可能にすることもできます。

2. 宣言

インターフェースの宣言は以下の通りです。

interface インターフェース名 {
   メンバ変数名: メンバ変数のデータ型;
   メンバ関数名(引数名: 引数のデータ型): 戻り値のデータ型;
}

具体的には以下のように書くことができます。

interface Square {
   width: number; 
   height: number;
}

3. 実装

クラスからインターフェースを継承することを実装といいます。
これはインターフェースはインターフェースを継承することができるため、間違えないように呼んでいます。

実装は以下のように定義します。

class クラス名 implements インターフェース名 {
   ...
}

具体例は以下の通りです。
多重継承（実装）も行うことができます。

//インターフェースの定義
interface Square {
   width: number; 
   height: number;
}

interface Base {
   upper: number;
   lower: number;
}

//クラスでインターフェースを実装する
class Parallelogram implements Square {
    width: number; 
    height: number;
    
    constructor(_width: number, _height: number){
        this.width = _width;
        this.height = _height;
    }

    getArea(): string {
        return `平行四辺形の面積は${this.width * this.height}です。`;
    }
}

class Trapezium implements Square, Base {
    width: number;
    height: number = 0;
    upper: number;
    lower: number;
    
    constructor(_width: number, _upper: number, _lower: number){
        this.width = _width;
        this.upper = _upper;
        this.lower = _lower;
    }
    
    getArea(): string {
        return `台形の面積は${this.width * (this.upper + this.lower) / 2}です。`;
    }
}



let p = new Parallelogram(4, 10);
console.log(p.getArea()); //平行四辺形の面積は40です。

let t = new Trapezium(6, 2, 3);
console.log(t.getArea()); //台形の面積は30です。

4. 継承

インターフェースはインターフェースを継承することができます。

継承は以下のように定義します。

interface インターフェース1 {
   メンバ変数名: メンバ変数のデータ型;
   メンバ関数名(引数名: 引数のデータ型): 戻り値のデータ型;
}

interface インターフェース2 extends インターフェース1 {
   メンバ変数名: メンバ変数のデータ型;
   メンバ関数名(引数名: 引数のデータ型): 戻り値のデータ型;
}

例は以下の通りです。

//インターフェースの定義
interface Square {
   width: number; 
   height: number;
}

interface Base extends Square{
   upper: number;
   lower: number;
}

class Trapezium implements Base {
    width: number;
    height: number = 0;
    upper: number;
    lower: number;

    constructor(_width: number, _upper: number, _lower: number){
        this.width = _width;
        this.upper = _upper;
        this.lower = _lower;
    }
    
    getArea(): string {
        return `台形の面積は${this.width * (this.upper + this.lower) / 2}です。`;
    }
}

let t = new Trapezium(6, 2, 3);
console.log(t.getArea()); //台形の面積は30です。

5. 型定義を行うインターフェース

インターフェースは以下のようにオブジェクトの型を定義することもできます。

interface Fruit {
   name:string;
   color: string;
}

let lemon: Fruit = {
   name: "レモン",
   color: "yellow"
};

インターフェースの基礎はここまでです。

様々な役割があるように見えるインターフェースですが、やっていることはクラスや関数に制限をつけることだけです。

次回はインターフェースの応用を解説します。

今回もご精読ありがとうございました。