TypeScript入門TypeScriptの設定をしよう

記事を共有：

ここで、少しTypeScript周りの設定をしておきましょう。この後、さまざまなプログラムを作成するに当たって、TypeScriptの厳格さなどからエラーになってしまうことがあります。

学習のため、ちょっと手軽な形でTypeScriptを使えるように、あえてここではエラーの表示を抑える設定を行ってしまいましょう。

tsconfig.jsonを作成しよう

TypeScriptの設定は、tsconfig.jsonという設定ファイルで行います。まずはこれを生成しましょう。ターミナルで次のコマンドで自動生成されます。

tsc --init

すると、フォルダ内にtsconfig.jsonというファイルができあがります。

これを編集しましょう。

設定項目がずらっと並んだファイルが表示されますが、ここで25行目付近に次の記述があります。

// "moduleDetection": "auto" /* Control what method is used to detect module-format JS files. */,

先頭が「//」になっているのは、コメントというもので設定が無効になっているので、これを消して有効にします。その上で、「auto」と記述されている箇所を「force」に変更しましょう。

"moduleDetection": "force" /* Control what method is used to detect module-format JS files. */,

これで無用なエラーを防ぐことができます（とはいえ、これは学習用の設定であり、本来は変更しないでください）

次に58行目付近の、次の行を探します。

// "outDir": "./" /* Specify an output folder for all emitted files. */,

同じく、先頭の「//」を消して「./」を次のように書き換えましょう。

"outDir": "./js" /* Specify an output folder for all emitted files. */,

これで完了です。

ここまで、プログラムを変更したらコマンドを使ってコンパイル作業をしていました。しかし、毎回やるのは面倒なので、ファイルの変更を監視して、変更されたら自動でコンパイルができるようにしましょう。

これには「watch」という機能を使います。ターミナルで、次のように入力しましょう。

tsc --watch

すると「ウォッチモード」というものが起動します。

これで、フォルダ内に「.ts」のファイルを作成して保存すると、自動的にコンパイルされるようになります。また、ファイルの出力先も変更しています。「js」というフォルダができあがって、ここにファイルが出力されるようになりました。

試しに、「test.ts」などのファイルを作成して、保存してみましょう。「js」フォルダに「test.js」というファイルができあがります。これで学習しやすくなりました。なお、test.jsは削除してしまって良いでしょう。

ウォッチモードが起動している間は、ターミナルが占領されてしまって利用できません。そこで、もう1つターミナルを起動しましょう。右上の「新しいターミナル」ボタンをクリックします。

すると、ウォッチモードは起動したまま、ターミナルをもうひとつ利用できるので、こちらを使ってJavaScriptの動作を確認すると良いでしょう。