※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】TSConfigの基礎

VSCode TypeScript tsconfig.json TSConfig

投稿日：2020年11月12日

このエントリーをはてなブックマークに追加

TSConfig

TSConfigとは

TSConfigはTypeScriptやJavaScriptのプロジェクトの設定を記述するファイルです。

TypeScriptの場合にはtsconfig.json、JavaScriptの場合にはjsconfig.jsonをそれぞれプロジェクトのルートに作成します。

VSCodeのインテリセンスなどはこの設定ファイルを元に参照を解決するので、

TypeScriptのプロジェクトを作成したらまずこのファイルを作成しましょう。

ターミナル
$ mkdir ts_sample_proj
$ cd ts_sample_proj/
$ touch tsconfig.json

tsconfig.jsonの書き方（基礎）

ではまずはサンプルとして、モジュールとしてcommonjsを使用してES5にコンパイルするtsconfig.jsonを書いてみます。

tsconfig.json
{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs"
    }
}

トランスパイル対象としてサンプルの.tsファイルが必要ですね。

作成しましょう！

ts_sample_proj/sample.ts
class Greeter {
    greeting: string;
  
    constructor(message: string) {
      this.greeting = message;
    }
  
    greet() {
      return "Hello, " + this.greeting;
    }
  }
  
  let greeter = new Greeter("world");
  console.log(greeter.greet());

このtsではES5では使用できないclassを使用しています。

正しくES5にトランスパイルできればclassが何か別の表現に置き換わるはずです。

コンパイルしてみましょう。

tscコマンドは引数にファイルを指定しなければ、そのディレクトリの全ての.tsファイルをトランスパイルします。

ターミナル
$ tsc

トランスパイル結果を見てみましょう。

ts_sample_proj/sample.js
var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greeter = new Greeter("world");
console.log(greeter.greet());

classがfunctionでの表現に変わりました！

ではtsconfig.jsonのtargetを変えてみましょう。

ts_sample_proj/sample.ts
{
    "compilerOptions": {
        "target": "ES2020",
        "module": "CommonJS"
    }
}

targetをES2020にしました。

ES2020ではclassは問題なく使用できます。

トランスパイルしてみましょう。

ターミナル
$ tsc
ts_sample_proj/sample.js
class Greeter {
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
let greeter = new Greeter("world");
console.log(greeter.greet());

トランスパイルの結果がかわりました。

目的、実行環境に合わせて適切にtsconfigを設定してあげましょう！！

出力ディレクトリを変える

デフォルトの状態ではトランスパイルの結果のjsのコードはtsのコードと同じ場所に出力されます。

プロジェクトがある程度の規模になってきたりデプロイについてなど考えたりすると、jsをどこかのディレクトリにまとめたくなると思います。

tsconfig.jsonのoutDirではトランスパイルのjsの出力先を設定できます。

tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "CommonJS",
        "outDir": "out"
    }
}

今回はoutという名前のディレクトリにjsを出力するように設定しました。

これでトランスパイルしてみましょう。

ターミナル
$ tsc

outというディレクトリにjsファイルがまとめて生成されたはずです。

デバッグする場合

ある程度プログラミングの経験がある方は、ブレークポイントなどを設置してデバッグをすることの有効性をよく知っていると思います。

どのdebuggerを使うのかは各個人に任せるとして、デバッグにはjsのソースと元のtscコードをマッピングするファイルが必要になります。

そのマッピングファイルを生成するにはtsconfig.jsonのsourceMapをtrueにします。

tsconfig.json
{
    "compilerOptions": {
        "target": "es3",
        "module": "CommonJS",
        "outDir": "out",
        "sourceMap": true
    }
}

これでコンパイルしてみましょう。

ターミナル
$ tsc

outディレクトリを確認すると、.js.mapというファイルが生成されているはずです。

デバッガーにはこのファイルが必要になるので、もしデバッガーが上手く動作しない場合はこの設定を確認してみましょう。

環境ごとのtsconfig.jsonの使い分け

tscコマンドをファイルの入力なしで呼んだ場合、tscコマンドはまず現在のディレクトリからtsconfig.jsonファイルを探します。

現在のディレクトリに見つからない場合には、親ディレクトリを探し、なければ更に親ディレクトリを…

という様に見つかるまで再帰的に検索していきます。

tscコマンドに--project、または-pオプションでパスを指定すると、そのディレクトリのtsconfig.jsonを探しにいかせるか、そのパス自体がjsonのパスならそのファイル自体をTSConfigとすることができます。

テスト環境用と公開環境用でtsconfig.jsonを分けていた場合（例：/test/tsconfig.jsonと/prod/tsconfig.json）などにはこのオプションを使うと良いでしょう。

VSCodeでの設定ファイルの書き方

VSCodeではtsconfig.jsonを書いている時Ctrl + Spaceキーで設定値を予測させることができます。

非常に便利なので、書く時は使うことをオススメします！

参考

参考書籍

参考URL

このエントリーをはてなブックマークに追加
関連記事
記事へのコメント
1：名無しさん
2022年2月19日10:28

TSConfigか〜
結構難しいよな〜あれ

　　　　
検索
カテゴリ
Web開発
機械学習
プログラミング
その他
サーバー開発
Linux
目次