![見出し画像](https://assets.st-note.com/production/uploads/images/79569568/rectangle_large_type_2_8c45f81cca291d34c3e6eb937d47d46c.jpeg?width=1200)
TypeScript 入門の記録(18)プロを目指す人のためのTypeScript入門(3)
今回もプロを目指す人のためのTypeScript入門(以降、テキストと呼びます)でTypeScriptの学習をします。地道にコツコツ入門していく、3回目です。
第1章 イントロダクションの続き
まだ環境の準備が終わっていないので、入門が始まったような、まだ始まっていないような段階です。環境ができたら、簡単なプログラムを作成して実行してみます。
tsconfig.json の準備
前回、package.json に必要な設定を追加したのですが、今度は、TypeScriptコンパイラオプションの設定をします。TypeScriptコンパイラオプションは、コマンドラインで指定する方法と、tsconfig.jsonに設定する方法があり、tsconfig.jsonの方が取り回しやすいので広く使われているそうです。ここは、広く使われている方法を学ぶのが良さそうなので、素直に tsconfig.jsonを作ります。まずは、デフォルトのtsconfig.jsonを生成します。
![](https://assets.st-note.com/img/1653791797823-FFqFlewXRV.png)
![](https://assets.st-note.com/img/1653791954684-KwtqLJfkgF.png?width=1200)
josn にコメントがあるので、とてもわかりやすいんですけど、これはTypeScript独自の機能で、通常はjsonにコメント入れられないんですよね。すべての json ファイルにコメントが入れられたらいいのに。コメント書けない代わりに、読めばわかるように書けってことなんでしょうけど。
このデフォルト定義を、テキストに従って書き換えます。
![](https://assets.st-note.com/img/1653796694340-HlrXDxxi4k.png)
compilerOptions を修正したあと、最後に include オプションを追加しました。VSCodeだと、compilerOptions の表示を折りたたむことができるので、complierOptions の外に追加しやすいですね。この include オプションの設定追加で、src ディレクトリ配下のすべての .tsファイルがコンパイル対象にできます。ここまでの設定で、テキストの内容の学習が始められるようです。TypeScriptプログラミングの準備ができました。
Hello, world!
さぁ、お約束の"Hello, world!” の時間がやってまいりました!srcディレクトリにindex.ts を作成しました。
![](https://assets.st-note.com/img/1653825076935-nzQKRAkmN4.png)
これを、npx tsc でコンパイルすると、dist/index.jsが生成されました。
![](https://assets.st-note.com/img/1653825213982-Qx23vPwVBh.png?width=1200)
これを実行してみます。
![](https://assets.st-note.com/img/1653825371623-HQoNcsaBgx.png?width=1200)
できた~!
TypeScriptで書いて、JavaScriptにコンパイルしてから、Node.jsで実行すれば良いのですね。
さて、今度は、index.tsの変数の型を変更して、コンパイルエラーを発生させてみます。
![](https://assets.st-note.com/img/1653825662389-spRgsLCgTf.png)
![](https://assets.st-note.com/img/1653825753222-bbjQf1MeqQ.png?width=1200)
number型の messageに対して文字列が与えられているので、型が合っていないことがわかります。エラーを解消するために、index.tsのmessageをnumberに戻して保存します。
![](https://assets.st-note.com/img/1653825952884-75HtbnuB9Q.png)
![](https://assets.st-note.com/img/1653826028060-2CjqK8raHm.png)
コンパイルして実行ができました。OKです。
さて、今日はここまで。第1章が終わったので、次回は「第2章 基本的な文法・基本的な型」に入ります。続きは、また来週~!