Help us understand the problem. What is going on with this article?

Typescriptのinterfaceの使い方

More than 1 year has passed since last update.

はじめに

インターフェース自体をあまり理解できていない為使い所がわからなかった。
そのこで、調べたことをまとめてみました。

インターフェースとは

中身の実装を持たず、メンバーや型の定義だけ持つ。
(よくわからない説明になってしまいました)

使い方

◎基本的な使い方

implementsキーワードを使用して、インターフェースを実装します。
classの継承の時にextendsを使用するのと似てます。

インターフェースを実装している場合、インターフェースに存在するメンバーと同じ名前のメンバーが
必ず存在している必要があります。

interface MyInterface{
    name:string
}

class MyClass implements MyInterface{
    name:string;//このメンバーがない場合コンパイルエラーとなる。
}

インターフェースのメンバー全てがpublicとなる為、
アクセス修飾子がprivateの場合もコンパイルエラーとなる。

interface MyInterface{
    name:string
}

class MyClass implements MyInterface{
    private name:string;//コンパイルエラー
}

関数を指定する場合

interface MyInterface{
    getName():void;
    getDetail():{address:string};
}

class MyClass implements MyInterface{
    getName(){
    }
    getDetail(){
        return {
            address:'TOKYO'
        }
    }
}

◎関数のパラメーターをまとめて定義する

関数引数として、オブジェクトを渡す際にインターフェースを使用する。
インターフェースで設定したメンバーが、引数の値に存在しない場合はコンパイルエラーとなる。

interface MyParams{
    param1:string;
    param2:number;
    param3:{key:string}
}

function myFunc(params:MyParams){
}

myFunc({param1:'A',param2:123,param3:{key:'KEY'}});
myFunc({param1:'A',param2:123});//コンパイルエラーとなる

◎オブジェクトの型にinterfaceを利用する

オブジェクトの型定義としてインターフェースを利用することもできる。

interface MyIterface {
    name:string
}

var myObj:MyIterface = {name:'A'};
var myObj2:MyIterface;
var myObj3:MyIterface = 'A';//コンパイルエラーとなる。

◎配列の型にインターフェースを利用する

同じインターフェースを実装していれば、違うクラスでもまとめて扱うことができる。

interface MyIterface {
    name:string
}

class A implements MyIterface{
    name = "A";
}

class B implements MyIterface{
    name = "B";
}

class C implements MyIterface{
    name = "C";
}

var myArray:MyIterface[] = [new A(),new B(), new C()];

インターフェースの継承

インターフェースはクラス同様にextendsキーワードを使用して継承することができる。

interface MyIterface {
    name:string
}

interface SubInterface extends MyIterface{
    sex:string
}

class Myclass implements SubInterface {
    name = 'A';
    sex = 'B';
}

複数のインターフェースを実装する

インターフェースを実装する際に、インターフェース名をカンマで区切ると複数のインターフェースを実装できる。

interface MyIterface {
    name:string
}

interface SubInterface {
    sex:string
}

class Myclass implements MyIterface,SubInterface {
    name = 'A';
    sex = 'B';
}

interfaceのメリット

・同じinterfaceを実装しているクラスは、同じメンバーが必ず存在することが保証される。
・関数の引数がオブジェクトの際に型を定義するのに便利。
・コンパイルの支援の為に存在する為、コンパイル後のソースには影響しない。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away