VIDEO LESSON

TypeScriptのコンパイル方法：tsc・型チェック・JavaScript出力を解説の解説動画

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

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

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

0:00こんにちは。
0:00今回のテーマは、タイプスクリプトのコンパイル方法です。
0:04タイプスクリプトのコンパイラ、ティーエスシーは、コードの型を検査し、設定に応じてジャバスクリプトを出力します。
0:12出力されたジャバスクリプトが、ノードジェイエスやブラウザーなどの実行環境で動きます。
0:17ここで大切なのは、型チェックとファイル出力は別の処理だということです。
0:22設定によっては、型エラーがあってもジャバスクリプトが出力されてしまいます。
0:27今回は、一つのファイルを指定する方法と、設定ファイルでプロジェクト全体を扱う方法の二通りを確認し、
0:33よく使うオプションと、成功を正しく判断するコツまでを順に学びましょう。
0:39まず、コンパイルするコードを用意します。
0:41エスアールシー配下のメイン・ティーエスに、数値を二つ受け取って数値を返す、
0:45アド関数を作ります。
0:48十と二十を渡した結果を、コンソールログで表示すると三十になります。
0:53引数や戻り値につけたコロン・ナンバーという型注釈は、開発時に、数値として使えるかを検査するための情報です。
1:01変換後のジャバスクリプトには残りません。
1:04実際にコンパイル後のファイルを見ると、型注釈が消えていることを、後の画面で確認します。
1:10この小さな例で、変換の前と後を比べていきましょう。
1:14一つ目の方法は、ファイル名を指定してコンパイルすることです。
1:18プロジェクトのルートで、エヌピーエックス・ティーエスシーにメイン・ティーエスを渡し、
1:23ストリクト、ターゲット・イーエス二千二十、モジュール・ノードネクスト、アウトディーアール・ディスト、
1:29エラー時出力なしを指定します。
1:34出力先はディスト内のメイン・ジェイエスで、ノードで実行すると三十と表示されます。
1:40ターゲットは出力するジャバスクリプトの構文の水準、モジュールはノードジェイエスに合わせたモジュールの扱いを指定します。
1:49注意点として、コマンドに入力ファイル名を直接指定すると、ティーエスコンフィグ・ジェイソンは読み込まれません。
1:57二つ目の方法は、設定ファイルで管理することです。
2:00プロジェクトのルートにティーエスコンフィグ・ジェイソンを置き、ターゲット、
2:05モジュールとモジュール解決方式、入力のルートと出力先、ストリクトとエラー時出力なし、
2:09そしてソースマップをまとめます。
2:13インクルードでエスアールシー内のティーエスファイルを対象にし、エクスクルードでテストファイルを外します。
2:20この設定では、元のディレクトリ構成に沿ってディストへ出力され、ソースマップによって生成されたジャバスクリプトと元のタイプスクリプトの対応を示すマップファイルも作られます。
2:31設定ファイルがあるプロジェクトでは、こちらの方法が基本です。
2:35設定ファイルを使うときは、エヌピーエックス・ティーエスシーにプロジェクトオプションを付けて実行します。
2:43生成されたディスト内のメイン・ジェイエスをノードで実行すると、やはり三十と表示されます。
2:49ディストには、ジェイエス本体に加えて、ソースマップのファイルも生成されていました。
2:55生成後のジャバスクリプトを確認すると、アド関数の型注釈は消え、通常のジャバスクリプトの関数になっていました。
3:03なお、プロジェクトオプションと、入力ファイル名の直接指定は併用できません。
3:08ファイル群を設定で管理するか、一つのファイルにコマンドラインで設定を渡すか、
3:12どちらかを選びます。
3:15よく使うオプションを、前半と後半に分けて整理します。
3:19前半は出力形式に関するものです。
3:22ターゲットは、出力するジャバスクリプトの構文の水準で、実行環境の対応に合わせます。
3:28モジュールとモジュール解決方式は、モジュールの出力や解釈と、読み込み先の解決方法を指定します。
3:36アウトディーアールは生成物の出力先です。
3:39既定値は、コンパイラのバージョンや関連オプションによって変わることがあります。
3:45出力形式を安定させたい設定は、明示しておきましょう。
3:49特に、ターゲットを下げても、新しい標準エーピーアイの実装が自動で追加されるわけではない点にも注意してください。
3:58後半は、型チェックの厳しさに関するものです。
4:02ストリクトは、厳密な型チェックの一群を有効にする設定で、その中にはノーインプリシットエニーも含まれます。
4:10これは、型を推論できず、暗黙のエニーになってしまう箇所を診断する設定です。
4:16例えば、引数に型を付けていないショウ関数をストリクトでコンパイルすると、
4:20ティーエス七千六番のエラーになりました。
4:25ただし、正常に型推論できるコードまで、型注釈を必須にする設定ではありません。
4:31推論で十分な箇所は、そのままにできます。
4:34ソースマップも後半の仲間で、デバッガーで元のタイプスクリプトと対応付けるための情報を出力します。
4:42出力を止める二つの設定の違いを押さえます。
4:45ノーエミットは、型チェックなどの検査だけを行い、生成物を一切出力しません。
4:50一方、ノーエミットオンエラーは、コンパイラのエラーがある場合にだけ、新しい生成物を出力しません。
4:57違いは実機でも確認しました。
4:59文字列を数値の引数へ渡すコードは、ティーエス二千三百四十五番の型エラーになります。
5:05このとき、エラー時出力なしを指定すると出力フォルダーは作られませんでしたが、
5:10指定しない場合は、エラーが出てもジャバスクリプトが生成されていました。
5:15意図に合った設定を選ぶことが大切です。
5:18日常の使い方を二つ紹介します。
5:20一つ目は、ジャバスクリプトを出力せず、型チェックだけを行う方法です。
5:26プロジェクトオプションにノーエミットを付けて実行します。
5:30変更を取り込む前の確認や、自動化の手順に組み込むのに向いています。
5:36二つ目は、ウォッチによる監視です。
5:39プロジェクトオプションにウォッチを付けると、ファイルの変更を監視してコンパイルし続けます。
5:46監視コマンドは終了するまで動き続けるので、止めるときはターミナルでコントロール・シーを押します。
5:54この二つのコマンドは、それぞれ別の用途で実行するものとして覚えてください。
6:00対象ファイルと出力形式の注意点です。
6:03まずエクスクルードは、探索対象を絞るものですが、完全な読み込み禁止の仕組みではありません。
6:09対象のコードからインポートされたファイルは、エクスクルードに一致していても、
6:13型チェックの対象に入る場合があります。
6:18次にアウトファイルは、どのモジュール形式でも使える結合機能ではありません。
6:23実機でも、ノードネクストとの組み合わせでは、エーエムディーとシステム形式だけが対応するという、
6:28ティーエス六千八十二番のエラーになりました。
6:33また、ネクストジェイエスなどのフレームワークは、変換や出力を独自のビルド処理で行います。
6:40学習用の設定をそのまま上書きせず、役割を確認してください。
6:44まとめです。
6:45コンパイルには、ファイル名を指定してコマンドラインで設定を渡す方法と、ティーエスコンフィグ・ジェイソンでプロジェクト全体を管理する方法があります。
6:57型チェックと出力は別の処理なので、ビルドが成功したかは、出力ファイルの有無ではなく、
7:02コンパイラの終了コードと診断で判断してください。
7:07エラー時出力なしを指定しても、前回までに出力した古いファイルは削除されません。
7:13失敗後に古いディストを実行して、新しいコードが動いたと勘違いしないよう注意しましょう。
7:20練習として、変更を取り込む前にティーエスシー・ノーエミットを実行する手順を用意してみてください。
7:28計算結果を確かめるテストと合わせて使えば、より安心です。
7:33タイプスクリプト編は今回が最終回です。
7:36お疲れさまでした。

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

この動画で学べること

TypeScriptのコンパイルをtsconfig.jsonと実行例で解説。型チェック、出力先、noEmit・noEmitOnError、targetとmodule、watchとoutFileの違いを整理します。

解説記事・サンプルコードを読む：TypeScriptのコンパイル方法：tsc・型チェック・JavaScript出力を解説 →