※本ページではアフィリエイトリンク(PR)が含まれています※

TypeScript

【5分でわかる】Interfaceの使い方 | TypeScript入門

この記事ではTypeScriptにおけるInterfaceの使い方をご紹介します。

Interfaceとは?

Interfaceは、オブジェクト構造に名前をつけることによってユーザーによって定義された型を作ることができます。

型といえばstring,numberといったTypeScriptの標準で用意された型が存在します。

Interfaceを使えばユーザーがあらかじめ定義した型を再利用することで安全な開発をすることが可能です。

列挙と名のつく通り、複数の値を一つの変数で管理することが可能です。

Interfaceは、ユーザーがあらかじめ定義じた型を再利用することができます。

TypeScriptにおけるInterfaceの書き方

具体的には以下のようにInterfaceで型を定義できます。

interface Human {
    name: string; 
    age: number;
}

上記で定義した型を利用するためには以下のように記載します。

declare var human: Human;

interfaceでは型だけ定義します。値は設定しません。

TypeScriptにおけるInterfaceの機能

では具体的にTypeScriptにおけるInterfaceの機能を見ていきましょう。

ClassにInterfaceを実装する

TypeScriptでは、ClassにInterfaceを実装することができます。

以下のように、implement でInterfaceを実装することが可能です。

interface Human{
    name: string; 
    age: number;
}

class HumanDatas implements Human{
    name: string; 
    age: number;
}

この時注意いただきたのは、

  • implementsで実装されたInterfaceで定義されている変数は全てClass内のメンバ変数として定義されている必要がある
  • Class内の変数をpublicにするか、privateにするかはinterfaceで定義されている内容に合わせる必要がある

です。

interfaceで定義された内容とClassで実装するメンバ変数は合わせる必要がある。

Interfaceに関数を定義する

TypeScriptでは、Interfaceに関数を定義することができます。

具体的には以下のように定義します。

interface Human{
    getName(): void; 
    getAge():{age:number};
}

class HumanDatas implements Human{
   getName(){
   }
   getAge(){
      return {
         age:20
      }
   }
}

Interfaceを継承する

TypeScriptでは、Interfaceに親子関係を作り、機能を親から子へ継承させることが可能です。

継承は、interfaceにextendsを使うことによって実現可能です。

例えば以下のように定義します。

interface HumanName{
    getAge():{age:number};
}

interface HumanAge extends HumanName{
    getAge():{age:number};
}

class HumanDatas implements HumanAge{
   getName(){
   }
   getAge(){
      return {
         age:20
      }
   }
}

複数のインタファースをClassに実装する

TypeScriptでは、Classに複数のInterfaceを実装できます。

カンマ区切りでimplementの中を実装すれば実現可能です。

interface HumanName{
    getAge():{age:number};
}

interface HumanAge{
    getAge():{age:number};
}

class HumanDatas implements HumanName,HumanAge{
   getName(){
   }
   getAge(){
      return {
         age:20
      }
   }
}

TypeScriptにおけるInterfaceを理解しよう!

今回はTypeScriptにおけるInterfaceの使い方を紹介しました。

いかがだったでしょうか?

ぜひこの機会にTypeScriptにおけるInterfaceの使い方を習得してみてください。

きむら

ここまで記事を読んでいただきありがとうございました♪