VIDEO LESSON

TypeScriptのtsconfig.json実践入門：strictと追加の型チェックを設定するの解説動画

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

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

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

0:00こんにちは。
0:00今回のテーマは、タイプスクリプトの設定ファイル、ティーエスコンフィグ・ジェイソンです。
0:07型チェックの条件と、ジャバスクリプトの生成方法をまとめるファイルで、プロジェクトの土台になります。
0:15この動画では、小さなノード・ジェイエス用プロジェクトを作り、ストリクトと、
0:21二つの追加の型チェックがそれぞれ何を検査するのかを、実行できる例で確認します。
0:27対象は、関数や配列、オブジェクト型の基礎が分かる方です。
0:32設定をコピーして終わりにせず、なぜその検査が必要なのかまで、一歩ずつ理解していきましょう。
0:39まず、空のフォルダで実習用プロジェクトを準備します。
0:42コマンドでフォルダを作り、エヌピーエムで初期化して、タイプスクリプトと、
0:46アットタイプス・ノードを開発用にインストールします。
0:50アットタイプス・ノードは、ノード・ジェイエスのエーピーアイをタイプスクリプトに知らせる型定義です。
0:56使うノードのメジャーバージョンと型定義の対応も確認してください。
1:00さらに、パッケージ・ジェイソンへタイプ・イコール・モジュールを設定し、生成したジャバスクリプトをイーエス・モジュールズとして実行できるようにします。
1:09パッケージロックも残すと、依存関係を再現しやすくなります。
1:12次に、ティーエスコンフィグ・ジェイソンを配置します。
1:16コンパイラオプションの中に、ターゲットやモジュール方式、ストリクト、追加の二つのチェック、
1:21エラー時に出力を作らないノーエミットオンエラーを並べます。
1:27インクルードは最初に読み込むファイルの範囲、ルートディレクトリは出力へ構造を反映する基準、
1:31アウトディレクトリは出力先です。
1:35ただし、対象ファイルが参照するファイルは読み込まれるため、インクルードをセキュリティの境界として扱わないでください。
1:43リブは標準ジャバスクリプトのエーピーアイ、タイプスはノードのグローバルな型を読み込みます。
1:50型定義を足しても、実行環境へ機能が追加されるわけではありません。
1:54ここで、ストリクトの意味を押さえます。
1:58ストリクト・トゥルーは、暗黙的なエニーや、ヌルとアンディファインドの扱いなど、
2:03複数の厳密な検査をまとめて有効にする設定です。
2:08一つずつ有効にするより漏れが少なく、新しいプロジェクトではまず有効にするのが基本です。
2:16個別の検査は明示的に上書きもできます。
2:19ただし、タイプスクリプトの更新で検査が強化される場合もあるため、バージョンアップ時には型チェックを通して確認しましょう。
2:29なお、ストリクトを有効にしても実行時エラーがなくなるわけではありません。
2:35外部データや通信の失敗は、実行時の検証やテストでも確かめる必要があります。
2:42注意したいのは、今回使う二つの追加設定は、ストリクトだけでは有効にならないことです。
2:49一つ目は、ノーアンチェックト・インデックスト・アクセスです。
2:54配列の添字アクセスなど、値の存在が保証できない読み取りに、アンディファインドの可能性を加えます。
3:02二つ目は、イグザクト・オプショナル・プロパティ・タイプスです。
3:07任意項目を省略することと、その項目へアンディファインドを代入することを区別します。
3:14この実習では、配列と任意項目の扱いを確認するため、両方を明示的に指定しています。
3:20次の二つの章で、それぞれコードで確かめます。
3:24一つ目の追加設定を、配列の例で見ます。
3:27空の配列では、添字ゼロの要素は存在せず、アンディファインドになります。
3:32ノーアンチェックト・インデックスト・アクセスを有効にすると、読み取った値の型にアンディファインドの可能性が含まれるため、
3:38そのまま大文字化のメソッドを呼ぶと型エラーになります。
3:44画面のように、まずアンディファインドかどうかを確認してから呼ぶのが正しい書き方です。
3:50実際に、判定を外した版では、ファーストがアンディファインドかもしれない、
3:54というエラーが出ることを実機で確認しました。
3:59ただし、タプルの既知の位置など、存在が型で保証されるアクセスまで一律にアンディファインドになるわけではありません。
4:07二つ目の追加設定は、任意項目の扱いです。
4:09ニックネームの後ろにクエスチョンマークを付けると、その項目は省略できます。
4:14しかし、イグザクト・オプショナル・プロパティ・タイプスを有効にした今回の設定では、
4:19省略することと、アンディファインドを明示的に代入することは別として扱われ、
4:24ニックネーム・イコール・アンディファインドのオブジェクトは代入できません。
4:29実機でも、その旨の型エラーになることを確認しました。
4:32値としてもアンディファインドを許したい場合は、ストリング・オア・アンディファインドと型に明記します。
4:38読み取るときは、項目が存在しない可能性があるので、ヌル合体演算子などで既定値を用意しましょう。
4:44作ったコードは、型チェック、ビルド、実行の三段階に分けて確認します。
4:50最初のコマンドは、ノーエミット付きで、出力を作らず型だけを確認します。
4:56次のコマンドでジャバスクリプトを生成し、最後にノードで実行すると、未設定、
5:01タイプスクリプトの大文字、ゲストの順に表示されます。
5:06この出力は、実機でコンパイルして実行し、記事の期待どおりであることを確認済みです。
5:13ここで大切な注意があります。
5:15ティーエスシーへ入力ファイルを直接渡すと、ティーエスコンフィグ・ジェイソンは読み込まれません。
5:23設定を使って検査したいときは、必ずマイナス・ピーで設定ファイルを指定してください。
5:30モジュール設定も確認します。
5:32ノードネクストは、ノード・ジェイエスのモジュール規則を扱う設定です。
5:37この実習のようにイーエス・モジュールズで自作ファイルを相対パスから読み込む場合、
5:44生成後のジャバスクリプトに合わせて、インポート文にはドット・ジェイエスという拡張子を指定します。
5:51入力ファイルがヘルパー・ティーエスでも、書くのは出力時の拡張子です。
5:56一方、バンドラーがまとめるブラウザ向けアプリでは推奨設定が異なるため、環境が生成した設定を出発点にしてください。
6:04また、ターゲットは主にジャバスクリプトの構文水準を決めるもので、古い環境へ不足するエーピーアイを追加する設定ではありません。
6:14実際の実行環境でも動作を確認しましょう。
6:17最後に、設定が反映されないときの確認点です。
6:21エディターの表示とコマンドの結果が違うときは、実行した場所と、対象にしている設定ファイルを確認します。
6:29ショーコンフィグ付きで実行すると、継承した項目やインクルードを含めた最終的な設定を表示できます。
6:37また、練習として、未設定判定を外して型エラーが出ることや、任意項目へアンディファインドを代入して省略との違いが出ることを、
6:44自分でも試してみてください。
6:50型エラーを、理由のないアズや非ヌルアサーションで消すと、値が存在しないケースを見逃します。
6:57まず欠けた値をどう扱うかを決め、その処理をコードに表すことが大切です。
7:03まとめです。
7:04ティーエスコンフィグ・ジェイソンは、型チェックの条件とジャバスクリプトの生成方法をまとめる、
7:08プロジェクトの土台です。
7:13ストリクトで厳密な検査をまとめて有効にし、さらにノーアンチェックト・インデックスト・アクセスで配列の読み取りを、
7:20イグザクト・オプショナル・プロパティ・タイプスで任意項目の扱いを、それぞれ厳密にできます。
7:27確認は、型チェック、ビルド、実行を分けて行い、設定を使うときはマイナス・ピーを忘れないことがポイントです。
7:35既存の大きなプロジェクトでは、まず出力しない型チェックで影響を把握し、欠けたデータを扱う分岐を足しながら、
7:39段階的に導入してみましょう。
7:44お疲れさまでした。

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

この動画で学べること

Node.js用のtsconfig.jsonを実践解説。strictと追加の型チェック、任意項目、NodeNext、型チェックとビルドの違いを実行できる例で確認します。

解説記事・サンプルコードを読む：TypeScriptのtsconfig.json実践入門：strictと追加の型チェックを設定する →