TypeScript tsconfig.json について

TypeScriptをコンパイルするコマンド tscがあつかう設定ファイル。
tsconfig.json について、調べたので記載しておく。

TypeScriptの動作ついては、以下のplaygroundで動きを確かめられる。
https://www.typescriptlang.org/play/index.html

tsconfig.json を生成する。

npmの管理下であれば tsc –init でファイルを作成してくれる。

$(npm bin)/tsc --init
# ==> message TS6071: Successfully created a tsconfig.json file.

tsconfig.json は、
TypeScriptで書かれたプロジェクトの
ルートディレクトリに配置する事で、tscコマンドが自動で読み取ってくれる。

tscコマンド実行時のカレントディレクトリにtsconfig.jsonが存在しない場合は、
親ディレクトリを遡って検索するようだ。

–project or -p オプションで指定する事も可能

tsc --project path/to/tsconfig.json

tsconfig 設定例

tsconfig.json は以下のような感じ
公式のドキュメントに書いてあった、tsconfig.json を引っ張ってきた。

ふむふむ、こんな設定かあるのね。

e.g.1)

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        "scanner.ts",
        "parser.ts",
        "utilities.ts",
        "binder.ts",
        "checker.ts",
        "emitter.ts",
        "program.ts",
        "commandLineParser.ts",
        "tsc.ts",
        "diagnosticInformationMap.generated.ts"
    ]
}

e.g.2)

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

globが使えるようになる前は、
filesで個別に1つずつファイル指定して使う事があったようだが、
今はあまりなさそうなケースだ。

ワイルドカード、globについて

include,excludeなどで使える記号です。

記号 説明
* 何かしらの文字列にマッチ
? 何かしらの1文字にマッチ
**/ glob サブディレクトリすべてにマッチ

型定義ファイル

型定義ファイルは、デフォルトでnode_modules/@types 配下が読み込まれるようになっているみたい。

型定義ファイルのインストールは、以下のコマンドで。

npm install --save-dev @types/hoge

別のディレクトリを指定したい場合、typeRoots に配列で複数設定する事ができる。

{
   "compilerOptions": {
       "typeRoots" : ["./typings"]
   }
}

必ず設定しておきたいオプション

target

以下のなかから、指定が可能。
tscでコンパイルした後のjsファイルが
どのECMA Scriptに準ずるか。

  • es3
  • es5
  • es6

es5か、使うブラウザが限定できるならes6にしておくのが良さそう。

module

  • none
  • commonjs
  • system(SystemJS)
  • umd
  • es6 / es2015

インポート構文の解釈をどうするか的な設定みたいだか、正直よくわからない。
commonjs を使っておくのがベターな模様。

sourceMap: true

sourceMapファイルを生成する。
このファイルがあると、
ChromeなどのDevelopperToolsで見た時に、コンパイル前のソースが見れるようになる。

その他の知っておきたいオプション

outDir

出力先ディレクトリを指定する。

outFile

コンパイルしたtsファイルを一つのjsファイルとして出力する。

noImplicitAny: true

暗黙のany型宣言をエラーにする

noImplicitThis: true

thisに型宣言がないと検出

noUnusedLocals: true

使っていないローカル変数を検出する

noUnusedParameters: true

使っていない引数を検出する

strictNullChecks: true

nullを許容しない

noImplicitReturns: true

戻り値が定義した型じゃないと検出

noEmitOnError: true

コンパイルが失敗したときはjsを吐かない (エラーが発生してもjsファイルを生成しているのか?)

コメントを残す