VIDEO LESSON

TypeScriptのinterfaceとtype：オブジェクトの型定義と使い分けの解説動画

再生時間 7:32動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00タイプスクリプト入門、第四回はインターフェースとタイプです。
0:05前回は基本型を学びました。
0:07今回は、複数の項目を持つオブジェクトの形を、名前を付けて定義する方法を学びます。
0:13中心になるのがインターフェースです。
0:16インターフェースは、オブジェクトが持つプロパティやメソッドの型を決める契約のようなものです。
0:23必須の項目、省略できる項目、書き換えを防ぐ項目を区別し、クラスが満たすべき形も表せます。
0:30後半では、同じく型に名前を付けるタイプとの使い分けも整理します。
0:35この回を終えるころには、オブジェクトにどんな型を付ければよいかが判断できるようになります。
0:42まず、インターフェースでユーザーの形を定義します。
0:45アイディーとネームは必須のプロパティです。
0:48ニックネームの後ろにあるクエスチョンマークは、省略できる任意のプロパティを表します。
0:54省略できる項目を読むとき、その型はストリングかアンディファインドのどちらかになるため、
0:59値がない場合の扱いを考える必要があります。
1:03ここでは、クエスチョンを二つ重ねた演算子で、ニックネームがないときはネームを使うようにしています。
1:10アイディーに付けたリードオンリーは、型チェックの上で再代入を防ぐ指定です。
1:15ただし、実行時にオブジェクトを凍結する処理ではない点に注意してください。
1:21タイプスクリプトの特徴は、名前ではなく形で互換性を判断する点です。
1:27これを構造的型付けと呼びます。
1:30たとえば、ネームという文字列だけを求めるインターフェースがあるとします。
1:37引数に渡すオブジェクトが、その型を明示的に宣言していなくても、必要なネームを持っていれば渡すことができます。
1:48記事数が入った別の項目を持っていても、変数を経由する場合は問題になりません。
1:56インターフェースは、余分な項目が一切ないことを常に保証する仕組みではない、
2:01と理解しておきましょう。
2:06必要な形が合うかどうか、それが判断の基準です。
2:11これはクラスで作った値にも当てはまり、作り手と使い手が緩やかに結び付く理由にもなっています。
2:20ただし、オブジェクトリテラルを直接、代入や引数として渡す場面では、話が少し変わります。
2:26このときは余剰プロパティ検査と呼ばれるチェックが働き、型にない項目を書くとエラーになります。
2:33先ほどの例をリテラルのまま直接渡すと、ティーエス二三五三というエラーで止まります。
2:39一見すると不便ですが、プロパティ名の書き間違いを早い段階で見つけられる、
2:43ありがたい仕組みでもあります。
2:46変数経由では通るのに、直接書くとエラーになる。
2:50この違いを知っておくと、エラーメッセージの理由を追いやすくなります。
2:55インターフェースは、クラスの契約としても使えます。
2:59スピーカーというインターフェースに、ネームと、文字列を返すスピークというメソッドを定義します。
3:06クラスでインプリメンツ・スピーカーと書くと、そのクラスが必要な形を満たしているかをコンパイラが検査してくれます。
3:15メソッドが足りなければエラーになります。
3:18ただし、インプリメンツは実装を自動で作る機能でも、処理を継承する機能でもありません。
3:25あくまで検査です。
3:26型だけを読み込むインポート・タイプは、ジャバスクリプトの出力には残らず消去されます。
3:33クラスで作ったインスタンスも、通常のオブジェクトも、同じスピーカーとして共通に扱えるのが利点です。
3:41インターフェースには、拡張と宣言マージという特徴があります。
3:46拡張は、エクステンズというキーワードで既存のインターフェースを引き継ぎ、
3:49項目を追加する仕組みです。
3:53アニマルという基本の形に、犬種を表す項目を加えてドッグを作る、といった使い方ができます。
4:00もう一つの宣言マージは、同じ名前のインターフェースを複数回宣言すると、項目が自動的に合体する性質です。
4:09ライブラリーの型を後から拡張したい場面で役立ちます。
4:13この二つは、後で学ぶタイプにはない、インターフェースならではの性質として覚えておきましょう。
4:20一方のタイプは、型に別名を付ける仕組みで、オブジェクトの形も同じように書けます。
4:26タイプが得意なのは、オブジェクト以外の型への命名です。
4:30たとえば、下書きか公開済みかという候補を並べたユニオン型や、数値二つの組み合わせを表すタプルにも、
4:34名前を付けることができます。
4:38単純なオブジェクトの定義であれば、インターフェースでもタイプでも、どちらを使っても構いません。
4:45拡張やマージを使いたいならインターフェース、ユニオンなどをまとめたいならタイプ、
4:50というように、表現したい内容とプロジェクトの方針で選びましょう。
4:55ファイルに分けた例は、実際にコンパイルして確かめましょう。
4:59メインのファイルを指定してコンパイルすると、読み込んでいるスピーカーのファイルも一緒に処理されます。
5:07ストリクトを有効にし、ターゲットやモジュールの指定を付け、エラーがあれば出力を止めるオプションも加えます。
5:15実行すると、猫のインスタンスからはミケ、にゃー、オブジェクトで作った案内係からは、
5:19案内係、ようこそ、と表示されます。
5:23型チェックが通ることと、実行結果が期待どおりであること、その両方を確認する習慣が大切です。
5:30大切な注意点です。
5:31インターフェースは、実行時の検証ではありません。
5:35エーピーアイから受け取った値にユーザーという型を付けただけでは、中身の形は一切確認されません。
5:42インターフェースはジャバスクリプトの出力に残らないため、インスタンスオブで調べることもできません。
5:49外部からの入力は、まずアンノウンとして受け取り、必要なプロパティがあるかを自前の処理で確かめる必要があります。
5:57インターフェースの役割は、検証を終えた後のコードで、値を安全に扱いやすくすることです。
6:04この境界を意識して設計しましょう。
6:06最後に、設計のコツを二つ紹介します。
6:09一つ目は、関数が求める型は小さく表すことです。
6:13大きなデータ全体を要求するのではなく、その関数が実際に読む項目だけをインターフェースにすると、
6:19さまざまなオブジェクトを渡しやすくなります。
6:25二つ目は、任意項目を増やしすぎないことです。
6:28すべてを省略可能にすると、使う側で何度も存在確認が必要になります。
6:34状態によって必須の項目が変わる場合は、種類を示す項目で判別できるユニオン型に分けると、
6:39不正な組み合わせそのものを表せなくなります。
6:45小さな契約を積み重ねる考え方は、この後の関数やクラスの学習でもそのまま役立ちます。
6:52まとめです。
6:53インターフェースは、オブジェクトの必須項目、任意項目、リードオンリーを表す契約であり、
6:58クラスへのインプリメンツでも形を検査できます。
7:02タイプスクリプトは名前ではなく形で判断する構造的型付けを採用し、リテラルを直接渡す場合だけ余剰プロパティ検査が働きます。
7:11使い分けでは、拡張や宣言マージが要る場合はインターフェース、ユニオンやタプルに名前を付けたい場合はタイプが向いています。
7:20そして、インターフェースは実行時の検証ではない点も忘れないでください。
7:25次回は第五回として、関数の引数、戻り値、オーバーロードの型を学びます。
7:31お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptのインターフェースでオブジェクト、関数、クラスの契約を定義します。任意項目、readonly、extendsとimplements、構造的型付けの注意点も解説します。

解説記事・サンプルコードを読む：TypeScriptのinterfaceとtype：オブジェクトの型定義と使い分け →