TypeScriptの設定

TypeScriptをJavaScriptにコンパイルする際に設定ファイルを記述しておくことで、どのようにコンパイルするか設定することができます。

以下コマンドを実行します。

tsc --init

こちらを実行すると、以下のようなtsconfig.jsonというコンパイル時の設定ファイルが作成されるかと思います。

tsconfig.json

{
  "compilerOptions": {
    ...
    "target": "es2016"
    ...
 }
    

こちらの中身を確認すると、いくつかの設定が記述されているかと思います。

各設定に関して詳細な説明は省略します。

こちらのファイルを一部修正します。

まず、 // "rootDir": "./",と記述されているかと思いますが、こちら先頭の/を削除して、"rootDir": "./src"としましょう。

...
   "rootDir": "./src",   
...

こちらは、TypeScriptのファイルがあるディレクトリを指し示すもので、基本的にsrcのようなディレクトリを作成し、そこにまとめて管理します。このように記述すると、もしsrc外のtsファイルを、src内のtsファイルで呼び出す際に、エラーとなります。

次に、// "outDir": "./",と記述されているかと思いますが、こちらも先頭の/を削除して、"outDir": "./dist"としましょう。

...
    "outDir": "./dist",
...

こちらは、コンパイルしたJavaScriptファイルを格納するディレクトリを指し示すもので、こちらもdistのようなディレクトリを作成し、そこに格納するようにします。

上記のように設定したので、ts_practice内に、srcディレクトリと、distディレクトリを作成し、srcディレクトリにindex.tsを移動しましょう。また、index.jsは削除しましょう。

Warpで以下コマンドにて、コンパイルします。ちなみにコンパイル時に、ファイルの指定をしない場合は、すべてのtsファイルがコンパイルされます。

tsc

上記のコマンドにて、distディレクトリ内に、index.jsが作成されたかと思います。

作成されたindex.jsを確認すると、先頭に以下のような記述があるかと思います。

"use strict";

こちらは、tsconfig.jsonにて"strict": trueという設定がされており、こちらは、型チェックを厳しくすることができる設定で、ここでは詳細な説明は省略します。