見出し画像

TypeScript 入門の記録(18)プロを目指す人のためのTypeScript入門(3)

今回もプロを目指す人のためのTypeScript入門(以降、テキストと呼びます)でTypeScriptの学習をします。地道にコツコツ入門していく、3回目です。

第1章 イントロダクションの続き

まだ環境の準備が終わっていないので、入門が始まったような、まだ始まっていないような段階です。環境ができたら、簡単なプログラムを作成して実行してみます。

tsconfig.json の準備

前回、package.json に必要な設定を追加したのですが、今度は、TypeScriptコンパイラオプションの設定をします。TypeScriptコンパイラオプションは、コマンドラインで指定する方法と、tsconfig.jsonに設定する方法があり、tsconfig.jsonの方が取り回しやすいので広く使われているそうです。ここは、広く使われている方法を学ぶのが良さそうなので、素直に tsconfig.jsonを作ります。まずは、デフォルトのtsconfig.jsonを生成します。

デフォルトのtsconfig.json生成
コメントアウトされたオプションがたくさん

josn にコメントがあるので、とてもわかりやすいんですけど、これはTypeScript独自の機能で、通常はjsonにコメント入れられないんですよね。すべての json ファイルにコメントが入れられたらいいのに。コメント書けない代わりに、読めばわかるように書けってことなんでしょうけど。
このデフォルト定義を、テキストに従って書き換えます。

最後に include オプションを追加

compilerOptions を修正したあと、最後に include オプションを追加しました。VSCodeだと、compilerOptions の表示を折りたたむことができるので、complierOptions の外に追加しやすいですね。この include オプションの設定追加で、src ディレクトリ配下のすべての .tsファイルがコンパイル対象にできます。ここまでの設定で、テキストの内容の学習が始められるようです。TypeScriptプログラミングの準備ができました。

Hello, world!

さぁ、お約束の"Hello, world!” の時間がやってまいりました!srcディレクトリにindex.ts を作成しました。

index.ts

これを、npx tsc でコンパイルすると、dist/index.jsが生成されました。

dist/index.js

これを実行してみます。

Hello, world! 実行できた!

できた~!
TypeScriptで書いて、JavaScriptにコンパイルしてから、Node.jsで実行すれば良いのですね。
さて、今度は、index.tsの変数の型を変更して、コンパイルエラーを発生させてみます。

messageをnumber型に変更するとエラー
そのままコンパイル実行してみるとコンパイルエラー

number型の messageに対して文字列が与えられているので、型が合っていないことがわかります。エラーを解消するために、index.tsのmessageをnumberに戻して保存します。

stringに戻すとエラーは解消されます。
正常に戻りました

コンパイルして実行ができました。OKです。

さて、今日はここまで。第1章が終わったので、次回は「第2章 基本的な文法・基本的な型」に入ります。続きは、また来週~!

この記事が気に入ったらサポートをしてみませんか?