普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。
今回は、TypeScriptにおけるインターフェイスについて記述していきたいと思います。
1. TypeScriptにおけるインターフェイスとは
TypeScriptにおけるインターフェイスとは、オブジェクトや関数、クラスの定義をひとまとめにする機能を持っており、型を表現する方法の1つです。
以前のTypeScriptの型定義について記事にしましたが、インターフェイスでそれらの型を１箇所にまとめることがで切るため、コードがスッキリして見やすくなります。
TypeScriptで型を定義する場合、例えば下記の様なコードでしたら、問題なく記述が出来るかと思います。
const name: string = '正吉';
name = '正吉'
name = 20 // Type 'number' is not assignable to type 'string'ですが、より複雑なコードを記載していくとかなり読みにくく、面倒くさいと感じます。
そこでインターフェイスを使用して、オブジェクトの型に名前をつけていき、だいぶ楽に型を定義することができます。インターフェイスを定義する、interfaceキーワードを利用してオブジェクトや関数を定義していきます。
2. クラスでのインターフェイスの実装と注意点
classを継承するときに使用するextendsと似ていますが、インターフェイスを実装する場合は、implementsキーワードを使用します。 ※ 実装はextendsキーワードではないことに注意が必要です。
インターフェイスの実装している際、インターフェースに存在するメンバーと同じ名前のメンバーが必ず存在している必要があります。
また、インターフェイスのメンバー全てがpublicとなる為、アクセス修飾子をprivateにするとコンパイルエラーとなります。
3. インターフェイスの継承
インターフェイスを継承して、新たなインターフェイスを宣言する場合は、implementsキーワードではなくextendsキーワードを利用します。
インターフェイスを使用するメリットの、一つに多重継承があります。
クラスを継承する場合、複数のクラスをいっぺんに継承できる訳ではなく、一つのクラスしか継承できない(単一継承)であることが多いです。TypeScriptの場合も同様に、単一継承しか認められておらず、複数のクラスを同時に継承する、多重継承は禁止されています。
多重継承をしてしまうと、メゾット名の重複してしまうなど色々と問題が起きてしまうためです。多重継承が許されている言語としては、 C++ や Pythonが挙げられます。
インターフェイスを使用することで、クラスの継承とは異なり、複数のインターフェイスを指定することができます。
本日はここまでとなります。最後まで読んでくださりありがとうございました。
