はじめに
前回は【TypeScript】基本的な型についてアウトプットしました。
今回はTypeScriptのInterfaceについてアウトプットします。
インターフェースとは？
TypeScriptのインターフェースは、あるインスタンスがどのようなプロパティ、メソッドを持っているかの仕様を定義します。
使い方
インターフェースを実装する時にはインターフェースで定義されているすべてのプロパティに値を設定する必要があります。
interface Person{
name:string;
age:number;
}
class Taro implements Person{
name:string;
age:number;
}
また、インターフェースのメンバー全てがpublicとなる為、
アクセス修飾子をprivateにするとコンパイルエラーとなります。
interface Person{
name:string;
age:number;
}
class Taro implements Person{
private name:string; //コンパイルエラー
age:number;
}
任意のプロパティ
必ずしもすべてのプロパティが必須とは限らないため、そのようなプロパティを表すにはプロパティ名の末尾に ? を付けます。
以下のPersonインターフェースのageプロパティはオプショナルになっているため、Personオブジェクトを生成するときにageプロパティの値を省略することができます。
interface Person {
name: string;
age?: number; // age プロパティはオプショナル
}
const p1: Person = { name: 'Taro', age: 100 }; // OK
const p2: Person = { name: 'Jiro' }; // OK
console.log(p1.age); //=> 100
console.log(p2.age); //=> undefined
}
読み取り専用プロパティ
読み取り専用にしたいプロパティはプロパティ名の前にreadonlyを付けます。
interface Person {
name: string;
readOnly age: number;
}
const p1: Person = { name: 'Taro', age: 20 }; // オブジェクト作成
p1.age = 30; // エラー: Cannot assign to 'age' because it is a read-only property.
関数の型定義
インタフェースは特定のプロパティを持つオブジェクトを表す以外に、メソッドの型を表すこともできます。
引数と戻り値だけを持つ関数宣言のように表現し、引数リストには名前と型が必須です。
// Grocery インタフェースを定義
interface Grocery {
name: string;
price: number;
calcTotal(quantity: number): number;
}
// Grocery 型のオブジェクトを生成
const grocery: Grocery = {
name: 'Apple',
price: 150,
calcTotal(quantity: number): number {
return this.price * quantity;
}
};
console.log(grocery.calcTotal(10)); //=> 1500
インデックスシグネチャ
プロパティへの添え字アクセスに対する型情報を定義します。
interface numInSpanish {
[key: number]: string;
}
//初期化
const esp: numInSpanish = {
1: "uno",
2: "dos",
3: "tres";
}
//更新
esp[10] = "diez";
//取得
console.log(esp[1]); //=> uno
console.log(esp[2]); //=> dos
console.log(esp[3]); //=> tres
console.log(esp[10]); //=> diez
継承
継承はextendsを使います。
interface Sports {
name:string;
}
interface Soccer extends Sports{
numOfPlayer:number;
}
class Jleague implements Soccer {
name = 'Soccer';
numOfPlayer: 11;
}
インターフェースは多重継承が可能です。
interface Sports {
name:string;
}
interface Soccer {
numOfPlayer:number;
}
class Jleague implements Sports,Soccer {
name = 'Soccer';
numOfPlayer: 11;
}