インターフェース（Typescriptを学んでいこう #4）
第4回はインターフェースについてです。
Interface
インターフェースとは、特定の形状を持つオブジェクトを定義するための方法です。他のプログラミング言語にもあるので、比較的わかりやすいと思います。コードの一貫性と予測可能性が向上し、エラー回避に役立ちます。
下記のコードが一例です。
// interface宣言時には具体的な値をセットすることはできない
interface Person {
name: string;
age: number;
greet(phrase: string): void;
}
let user1: Person;
user1 = {
name: 'Max',
age: 20,
greet(phrase: string) {
console.log(`${phrase} ${this.name}.`);
}
}
user1.greet(`Hello, there. I am`);Personインターフェースを定義しており、Personが指定された場合は、name , age , greet() を実装しなければなりません。
インターフェースを使う理由
インターフェースはオブジェクトが特定のプロパティとメソッドを持つことを保証するため、コードの一貫性と予測可能性が向上し、エラーが発生する可能性が減少します。
Readonly property
読み取り専用のプロパティを定義することができます。
interface Greetable {
readonly name: string; // プロパティの前にreadonlyをつける
greet(phrase: string): void;
}インターフェースの実装
クラスはインターフェースを実装することができます。これによってそのクラスに対して、特定のプロパティやメソッドを強制させることができます。また、1つのクラスに対して複数のインターフェースを実装することもできます。
interface Named {
readonly name: string;
}
interface Greetable {
greet(phrase: string): void;
}
class Person implements Greetable, Named {
name: string;
age = 30;
constructor (n: string) {
this.name = n;
}
greet(phrase: string) {
console.log(`${phrase} ${this.name}`);
}
}継承
インターフェースは別のインターフェースを継承することができます。クラスでは1つのクラスしか継承できませんでしたが、インターフェースの場合は複数のインターフェースを継承することができます。
interface Named {
readonly name: string;
}
interface AnotherInterface {
// プロパティかメソッド
}
interface Greetable extends Named, AnotherInterface {
greet(phrase: string): void;
}関数の型定義
インターフェースでは関数の型を定義することもできます。使い方は型を定義するtypeとよく似ています。
// number型の引数を2つ受け取り、numberを返却する関数を定義
interface AddFn{
(a: number, b: number): number;
}
let add: AddFn;
// 定義した型と違う場合はエラーになる
add = (n1: number, n2: number) => {
return n1 + n2;
}オプションのパラメータ
インターフェースでは、プロパティやメソッドを持つことを強制することができますが、オプションとして定義することができます。オプションとして定義されたパラメータは、継承したクラスで定義されていなくても、エラーが発生しません。
// オプションにする場合は?をつける
interface Named {
readonly name?: string; // プロパティだけなくメソッドもオプションにできる
}
class Person implements Greetable {
name?: string;
age = 30;
constructor (n?: string) {
if (n) {
this.name = n;
}
}
greet(phrase: string) {
if (this.name) {
console.log(`${phrase} ${this.name}`);
} else {
console.log('Hi!');
}
}
}コンパイル後のインターフェース
Javascriptにコンパイルされた後のソースコードには、インターフェースの記述は存在しません。これはJavascriptがインターフェースの概念を知らないからです。そのため、インターフェースで定義した内容は、あくまでコンパイルするときのコードをチェックするためだけに使われます。
以上です。