TypeScriptのインターフェースの使い方について、自分用のメモとしてまとめてみました！
参考になれば幸いです。
関連記事もどうぞ↓
【解説】TypeScriptの型定義をまとめてみた【初心者向け】 目次
【解説】TypeScriptのインターフェースの使い方【interface】
インターフェースの使い方を、下記の手順で解説していきます。
・基本的な使い方
・Typeエイリアスとの違い
・クラスに適用する方法
・「readonly」で読み取り専用に
・インターフェースを継承する
・関数の型を定義できる
１つずつ見ていきましょう。
インターフェースはオブジェクトが持つべきプロパティとその型を定義することができます。
例として下記のように使えます↓
interface Fruit {
name: string;
num: number;
}
const orange: Fruit= {
name: 'みかん',
num: 3,
};「orange」のオブジェクトは、インターフェースのFruitで定義された型に沿って実装していくようになります。
定義した型をまとめておいて、それを使えるのでかなり便利ですよね。
Typeエイリアスとの大きな違いは、インターフェースは基本的にオブジェクトのみに使うということです。
つまりインターフェースが使われてるということは、オブジェクトを示しているとわかるのが良い点ですね。
インターフェースをクラスに適用させるには、「implements」を使えば可能です。
interface Fruit {
name: string;
num: number;
}
class Food implements Fruit {
constructor(public name: string, public num: number) {
}
}ちなみに複数指定することも可能です↓
class Food implements 〇〇, 〇〇, 〇〇 {
}クラスに関しては下記記事で詳しく解説しておりますので参考にどうぞ↓
インターフェースの中のプロパティに、「readonly」をつければ読み取り専用になります。
interface Fruit {
readonly name: string;
num: number;
}
const orange: Fruit= {
name: 'みかん',
num: 3,
};
orange.name = 'オレンジ' // エラーがでます。初期値のときには代入できますが、そのあとに代入するとエラーがでます。
インターフェースは「extends」を使えば、継承して使うことが可能です。
interface Fruit {
readonly name: string;
num: number;
}
interface Food extends Fruit {
size: string;
}
const orange: Food= {
name: 'みかん',
num: 3,
size: '小さめ',
};上記例だと「Food」は、「Fruit」の型定義を継承しつつ定義することができます。
また複数使うこともできます↓
interface Fruit {
~~
}
interface Drink {
~~
}
interface Food extends Fruit, Drink {
}インターフェースではメソッド名を書かずに、下記のように関数の型を定義することもできます。
interface testFunc {
(a:number, b:number): number;
}
let testReturn: testFunc = (a:number, b:number) => {
return a + b;
}ただ実際はtypeエイリアスで関数定義したほうがわかりやすいため、実際はインターフェースではそんなに使わないそうです。
type testFunc = (a:number, b:number) => number;
let testReturn: testFunc = (a:number, b:number) => {
return a + b;
}【解説】TypeScriptのインターフェースの使い方【interface】：まとめ
- インターフェースはオブジェクトが持つべきプロパティとその型を定義できる
- クラスに適用させるには、「implements」を使えば可能
- 「readonly」をつければ読み取り専用になる
- 「extends」を使えば、継承して使うことが可能
- 関数の型を定義することもできる
TypeScriptでインターフェースを使う時はためしてみてね！
