はじめに
あけましておめでとうございます。
2023年初Qiitaです。
年末年始休みで始めたTypeScript入門の勉強ログ的なノリで書いていきます。
この記事が少しでも参考になれば嬉しいです。
tsconfigとは
対象のTypeScriptファイル（.tsファイル）をJavaScriptコードへコンパイルする際のコンパイルオプションを記述するファイルであり、 「TypeScriptがどのようにJavaScriptにコンパイルされるか」 を決定する、なくてはならない設定ファイルです。
通常はTypeScriptプロジェクトのルートフォルダに設置します。
The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.
訳：あるディレクトリにtsconfig.jsonファイルが存在する場合、そのディレクトリがTypeScriptプロジェクトのルートであることを示します。tsconfig.jsonファイルは、プロジェクトのコンパイルに必要なルートファイルやコンパイラのオプションを指定する。
tsconfig.jsonの作成
tsconfig.jsonを作成するには、TypeScriptプロジェクトを初期化する必要があります。
そのためには、プロジェクトのルートフォルダでtsc --initコマンドを実行する必要があります。
このコマンドを実行することでTypeScriptに当該フォルダがプロジェクトのルートフォルダであることを伝えることができ、同時にtsconfig.jsonを作成してくれます。
※tsconfig.json内にはさまざまなオプションが記述されており、初期状態ではそのほとんどがコメントアウトされています。
以下のセクションから、生成したtsconfig.json内で使用頻度が高いオプションの紹介をしていきます。
使用頻度が高そうなオプション集
exclude
TypeScriptのコンパイル処理に含めたくないファイルを指定することができるオプション。配列で記述します。
以下の記述だと、exclude.tsをコンパイルの対象として除外されるため、コンパイル後のJavaScriptも生成されません。
"exclude": ["exclude.ts"]
ワイルドカードでの記述も可能です。
"exclude": ["*.dev.ts"]
include
TypeScriptのコンパイル処理に含めたいファイルを指定することができるオプション。配列で記述します。
以下の記述だと、include.tsをコンパイルの対象として含めることになります。
※excludeと同様にワイルドカードでの記述も可能
includeオプションを設定した場合、当該オプションに記述されていないファイルは全てコンパイル対象外となります。
"include": ["include.ts"]
target
コンパイル後のJavaScriptのバージョンを指定できるオプション。
TypeScriptはJavaScriptにコンパイルする際、JavaScriptに存在しない機能については、同じ動作をする代わりのコードを生成してくれます。
また、生成されたJavaScriptが、特定のバージョンのブラウザで動作するように考慮してコンパイルをしてくれます。
以下のような記述だと、全てのTypeScriptファイルがES6のバージョンのJavaScriptにコンパイルしてくれます。
"target": "es6"
こちらのオプションをES5に変更すると、コンパイルされたJavaScriptのバージョンもES5のコードとしてコンパイルされるので、ES5では対応していないTypeScriptのコードを、ES5でも動作する同様のコードにコンパイルされることになります。
tsconfig.json
app.ts
app.js
※ES5ではletをサポートしていないため、代わりにvarが使用されている
allowJs
TypeScriptファイルだけでなく、JavaScriptファイル（.js）もコンパイル対象に指定できるオプション。
こちらのオプションが有効だと、JavaScriptファイルもTypeScriptによってコンパイルされます。
checkJs
JavaScriptのコードを、コードのチェック対象にすることができるオプション。
こちらのオプションが有効だと、JavaScriptのコンパイルはしませんが、コードのチェックだけを行ってくれます。
TypeScriptと同様に、エラーになるかもしれないコードの部分をコンパイルエラーによって教えてくれます。
sourceMap
デバッグの際に、TypeScriptのファイルでデバッグをすることが可能になるオプション。
こちらのオプションが無効の場合
ブラウザの検証ツールでデバッグを行おうとした場合、JavaScriptファイルしか表示されません。
もしコンパイル後のコードが複雑であった場合、デバッグが難しくなります。可能であればTypeScriptのコードでデバッグしたい。
こちらのオプションが有効の場合
TypeScriptのコードも表示してくれるようになります。
sourceMapをtrueにした状態でコンパイルを行うと、コンパイル後のJavaScriptコードとは別に、app.js.mapというファイルが生成されます。
このファイルには、「TypeScriptとJavaScriptファイルの何行目と何行目が対応しているか」という紐付けの情報が記載されており、Chromeがそのファイルを解析することで、TypeScriptファイルでのデバッグを可能にしています。
outDir
コンパイルされたJavaScriptコードの出力先を指定できるオプション。
以下の記述だと、distディレクトリにコンパイルされたJavaScriptのコードが出力されます。
"outDir": "./dist"
rootDir
ソースが配置されるrootのフォルダを指定するオプション。
以下の記述だと、srcフォルダは以下にあるTypeScriptがコンパイル対象であることを明示的に指定するということになります。
"rootDir": "./src"
上記のように、rootフォルダ（srcフォルダ）を明示的に指定した場合、srcフォルダの外にTypeScriptファイルが存在した場合はコンパイルエラーが出力されます。
removeComment
コンパイル時にコメントを削除するオプション
これを有効にすると、コンパイル後のJavaScriptコードには、コメントアウトが削除された状態で出力されます。
noEmit
JavaScriptを出力しないようにするオプション。
これを有効にすると、コンパイラはJavaScriptのファイルを作成しません。
ファイルを出力する時間を節約して、コードのチェックだけを行いたい場合などで利用できるかもしれません。
noEmitOnError
コンパイルエラーがある場合に、JavaScriptを出力しないというオプション。
これを有効にすると、TypeScriptでコンパイルエラーが発生した場合に、JavaScriptのコードは作成されません。
デフォルトではfalseになっているため、たとえTypeScriptでコンパイルエラーが発生していたとしても、JavaScriptは生成されます。
noImplicitAny
関数の引数に型を指定しない場合にエラーを出力するかどうかを指定できるオプション。
こちらのオプションを無効にした場合
引数の型を指定していなくてもエラーにはなりません。
無効かつ引数を指定していない場合は、暗黙的にany型として扱われます。
こちらのオプションを有効にした場合
エラーが表示されます。（型を宣言するとエラーは解消されます）
strictNullChecks
nullの可能性があるオブジェクトに対し、nullチェックを行わずにアクセスする場合、エラーを出力するかどうかを指定できるオプション。
このオプションが有効になっている場合、nullかもしれないオブジェクトに対してアクセスする場合に、そのオブジェクトがnullである可能性を排除できない場合はエラーを返します。
こちらのオプションを無効にした場合
nullの可能性があるオブジェクトに対して、nullチェックなしでアクセスした場合でもエラーにはなりません。
こちらのオプションを有効にした場合
エラーが出力されます。（nullチェックを行い、nullである可能性を排除すればエラーは解消します）
strictBindCallApply
bind、call、applyの型チェックを厳しくするオプション。
こちらのオプションを無効にした場合
ビルトイン関数(bind、call、apply)の引数の型をチェックしません。
※以下画像内で呼び出されている関数の引数の型はstringであるが、intが指定されている状態
こちらのオプションを有効にした場合
bind、call、applyの型チェックが行われるようになり、呼び出す関数の引数の型を誤るとエラーを出力するようになります。
正しい型の引数を指定することにより、エラーは解消します。
noUnusedLocals
利用されないローカル変数が存在する場合に警告を出すオプション
有効にすることで、未使用変数がある場合はコンパイル時に警告を出力することが可能になります。
noUnusedParameters
利用されない引数が存在する場合に警告を出すオプション
有効にすることで、未使用引数がある場合はコンパイル時に警告を出力することが可能になります。
noImplicitReturns
戻り値がvoid型以外の関数で、すべての条件分岐において値を返しているかを厳密に評価するためのオプション。
以下のような関数かつ、オプションが無効になっていた場合、引数が0以下であった場合に暗黙的にundefinedが返却されるようになります。
オプションが有効である場合は警告が出力されます。
明示的にundefinedが返されることを宣言できていれば警告は解消されます。
以上になります。
終わりに
他にもよく使うオプションがあればコメント等でご教授ください。
今年はTypeScriptを一人前に扱うことができるよう頑張りたいと思います。
参考