🪡

【TypeScript】基本的なコンパイル方法とtsconfigの設定

に公開
TypeScript
tech

コンパイル方法

対象のファイルをコンパイル

引数で指定したファイルをコンパイルします

tsc index.ts

ウォッチモードでのコンパイル

引数で指定したファイルの変更を監視し、変更があった場合は自動でコンパイルします

tsc index.ts --watch
tsc index.ts -w

プロジェクト全体のコンパイル

1.tsconfig.jsonを生成

以下のコマンドを実行することでtsconfig.jsonが生成されます
tsconfig.jsonにコンパイルの設定を記述します

tsc --init

2.コマンド実行

ディレクトリ内の.tsファイルが全てコンパイルされます

tsc

（tsconfig.jsonの設定を変更することでコンパイル対象のファイルを変更することもできる）

プロジェクト全体に対してウォッチモードでコンパイルを実行することもできる

tsc --watch
tsc -w

tsconfig.jsonについて

tsconfig.jsonはTypeScriptプロジェクトの設定ファイルで、コンパイラの動作やプロジェクトの構成を定義します
コンパイル方法、型チェックのルール、対象ファイルなどを指定できます

今回は使いそうなコンパイラの設定をまとめました

exclude

コンパイル対象に含めたくないファイルを指定します


{
    "compilerOptions": {
    // ... existing code ...
    },
    "exclude": [
      "index.ts"
    ]
}

include

コンパイル対象のファイルを指定します


{
    "compilerOptions": {
        // ... existing code ...
    },
    "include": [
      "index.ts"
    ]
}

target

どのバージョンのJavaScriptにコンパイルするか指定します

rootDir

コンパイル対象のルートディレクトリのパスを指定します
一般的にはsrcというディレクトリを作成して、その中コンパイル対象のファイルを配置します

outDir

コンパイル対象のルートディレクトリのパスを指定します

一般的にはdistというディレクトリを作成して、その中にコンパイルしたJavaScriptファイルを出力します
ちなみにdistというのはdistributableの略らしいです

removeComments

コメントを削除してコンパイルしてくれます

noEmit

JavaScriptのファイルが作成されなくなります
ソースコードのエラーチェックのみを目的とする場合に利用します

noEmitOnError

コンパイルエラーが発生した場合に.jsファイルが作成されなくなります
デフォルトではコンパイルエラーが発生してもJavaScriptファイルは作成されます

noUnusedLocals

使用されていないローカル変数に対してエラーを発生させます
（グローバル変数はエラーの対象になりません）

noUnusedParameters

使用されていないパラメータに対してに対してエラーを発生させます

noImplicitReturns

関数の戻り値が明示的に記述されていない場合にエラーを発生させます

noFallthroughCasesInSwitch

フォールスルーの発生時にエラーを発生させます

補足：フォールスルーとは

swich文にてbreakを省略する記法のことです
コンパイルエラーは解消するにはcaseごとにbreakを追記しましょう

noImplicitOverride

親クラスのメソッドをオーバーライドする際にoverrideキーワードを使用しないとエラーを発生させます

noPropertyAccessFromIndexSignature

インデックスシグネチャを持つオブジェクトのプロパティに、ドット記法でアクセスしようとした時にエラーを発生させます

補足：インデックスシグネチャとは

インデックスシグネチャは、オブジェクトの動的なプロパティを定義する TypeScriptの機能です[key: KeyType]: ValueTypeの形式で、オブジェクトが任意のキーを持つことができ、そのキーに対応する値の型を指定できます

参考

基本的にはtsconfig.jsonのコメント見ましたが、公式ドキュメントも載せておきます
Compiler Options

Discussion