プログラミング

TypeScriptのinterfaceとは？【Typescript入門】

2021-02-22

この記事では、TypeScriptのinterfaceについて、説明をしていきたいと思います。

interfaceとは？

interface(インターフェース)とは、

後で宣言する変数や、クラスに

「この変数、メソッドだけは宣言してね！
そうしないとエラーにするよ！！！！」

と決める機能です。

よく、「interfaceは、オブジェクトの構造を宣言する。」と言います。

例で見ていきましょう。

interfaceの例

では、interfaceの例です。まずはクラスの構造を

interface IGun {             //銃(gun)のinterface 変数名は任意。
    bullet_num : number;     //銃には弾の数が必要
    name : string;           //銃には名前が必要
    fire():void;
    get_damage():{dmg : number}
}

class HandGun implements IGun{
    bullet_num = 200;
    name = 'walther P38';
    get_damage(){
        return{
        dmg : 17}
    }
}

この例では、IGunというinterfaceによってクラスHandGunには、

bullet_num, nameという変数がなければ、エラーになりますし、

get_damageという関数がなければ、エラーになります。

こんな感じで「interfaceはオブジェクトの構造を宣言」しているのです。

interfaceはinterfaceを継承する

interfaceはinterfaceを継承できます。

interface IWeapon {
   name : string;                   //武器には名前が必要
}

interface IGun extends IWeapon{      //銃(gun)のinterface 変数名は任意。
    bullet_num : number;            //銃には弾の数が必要
    fire():void;
    get_damage():{dmg : number}
}

class Myclass implements IGun {
    bullet_num = 200;
    name = 'walther P38';
    get_damage(){
        return{
        dmg : 17
        }
    }
}

最初の例と同じで、これでも、

bullet_num, nameという変数がなければ、エラーになりますし、

get_damageという関数がなければ、エラーになります。

interfaceをなぜ使うのか？

これまでに、interfaceができることを説明してきました。

しかし、これの何が便利なのか？

これが難しいところです。

調べたところ、

変更に強いアプリケーションを作ることができる。

これが、interfaceの利点です。

なぜ、interfaceを使うと、変更に強いのでしょうか？

これを見てください。

class PC {          //家電
    mouse : Mouse;           //テレビ
    keyboard : Keyboard; //掃除機

    constructor(mouse : Mouse, keyboard : Keyboard) {
        this.mouse = mouse;
        this.keyboard = keyboard;
    }
}

class Mouse {}
class Keyboard {}

const mymouse = new Mouse();
const mykeyboard = new Keyboard();
const myPC = new PC(mymouse, mykeyboard);

これは、PCにマウス、キーボードをつなげていると考えてください。

では、マウスを外して、マイクを付けるとしたら、どうしましょう？

PCクラスの中身を変えて、MICクラスを作り、そのオブジェクトをPCクラスの引数に渡すことになります。

では、こちらを見てください。

class PC {          
    usb1 : USB;
    usb2 : USB;
    constructor(usb1 : USB, usb2: USB) {
        this.usb1 = usb1;
        this.usb2 = usb2;
    }
}

class Mouse implements USB {}
class Keyboard implements USB {}

const mymouse = new Mouse();
const mykeyboard = new Keyboard();
const myPC = new PC(mymouse, mykeyboard);

再び、このコードで、マウスを外して、マイクを付けるとしたらどうしましょう？

MICクラスを作り、そのオブジェクトをPCクラスの引数に渡すことになります。

PCクラスを書き換えなくてもよいのです！

これがinterfaceのメリットと言えるでしょう。

-プログラミング