演習 - TypeScript でインターフェイスを宣言してインスタンスを作成する - Training

5 分

インターフェイスを定義するには、interface キーワードで開始し、その後にインターフェイス名 (識別子) を続けます。インターフェイス名は、型システムにあらかじめ定義された型名のどれかであってはなりません。また、慣例により、インターフェイス名はパスカルケースにします。

Note

TypeScript のコーディングのガイドラインでは、インターフェイスを文字 I で始めないことを勧めています。

次に、インターフェイスのプロパティ (またはメンバー) とそれらの型を定義します。プロパティは、必須、省略可能、または読み取り専用にすることができます。

プロパティの種類	説明	例
必須	特に指定がない限り、すべてのプロパティが必須です。	`firstName: string;`
省略可能	プロパティ名の末尾に疑問符 (`?`) を追加します。これは必須でないプロパティに対して使用します。こうすると、プロパティを省略した場合に型システムでエラーは発生しません。	`firstName?: string;`
読み取り専用	プロパティ名の前に readonly キーワードを追加します。これは、オブジェクトの初回作成時以外は変更できないようにする必要があるプロパティに対して使用します。	`readonly firstName: string;`

メンバーを持つインターフェイスを宣言する

プレイグラウンドを開いて、既存のコードをすべて削除します。
IceCream という名前のインターフェイスを宣言します。これには 2 つのプロパティが含まれます: string である flavor と number. である scoops
```
interface IceCream {
   flavor: string;
   scoops: number;
}
```
次に、新しいインターフェイスを実装できます。 IceCream インターフェイスを変数宣言内の型として使って開始しましょう。 myIceCream という新しい変数を IceCream 型として宣言してから、必須プロパティに値を代入します。プロパティ名の入力を開始すると、Intellisense によって正しい名前と型が提示されることに注意してください。コンソールに値を表示して作業内容を確認します。
```
let myIceCream: IceCream = {
   flavor: 'vanilla',
   scoops: 2
}

console.log(myIceCream.flavor);
```
[実行] を選択します。 [ログ] ウィンドウにフレーバーが表示されることに注目します。
次に、IceCream インターフェイスをパラメーターの型として使用する tooManyScoops という関数を末尾に作成しましょう。この関数で IceCream オブジェクト内のスクープの数をチェックし、結果に基づいてメッセージを返します。作業をテストするには、オブジェクト {flavor: 'vanilla', scoops: 5} をパラメーターとして渡し、結果をコンソールに返して確認します。
```
function tooManyScoops(dessert: IceCream) {
   if (dessert.scoops >= 4) {
      return dessert.scoops + ' is too many scoops!';
   } else {
      return 'Your order will be ready soon!';
   }
}

console.log(tooManyScoops({flavor: 'vanilla', scoops: 5}));
```
[実行] をクリックしてコードを実行します。出力は次のようになります。
```
"vanilla"
"5 is too many scoops!"
```
JavaScript ペインを開き、JavaScript コードと TypeScript コードの相違点を確認します。 JavaScript コードにはインターフェイス表現がありません。
IceCream インターフェイスに別のプロパティを追加するとどうなるでしょうか。 instructions という名前の新しいプロパティを追加し、それに string 型を割り当てます。
コードに表示されるエラーを確認します。解決するには、instructions プロパティを変数宣言の実装の詳細に追加し、関数に渡されるパラメーターとして追加する必要があります。ここでは、instructions プロパティの名前に疑問符を追加してプロパティを省略可能にします。インターフェイスで instructions プロパティが必須でなくなったため、すべてのエラーが解決します。

ここまでは順調です。しかし、トッピングのないアイスクリームサンデーは、ただのアイスクリームです。次は、インターフェイスを拡張する方法を見てみましょう。

続行

演習 - TypeScript でインターフェイスを宣言してインスタンスを作成する

メンバーを持つインターフェイスを宣言する

フィードバック