ども、フロントエンドにハマり中のカロージです。
TypeScriptについて、今回を含め数回ほど記事にしたいと思います。
とゆーことで今回は、
TypeScript の「tsconfig.json」 の設定についてです。
tsconfig.jsonの全オプションを理解するのは
なかなか厳しいので、各オプションから、よく使うモノのみをピックアップしました。
「tsconfig.json」のオプション
-
include
コンパイルするファイルを指定する。ワイルドカード(*,?,**/)が使える。
1234"include": ["sample.ts",] -
exclude
指定したファイルをコンパイル対象外に指定する。こちらもワイルドカード(*,?,**/)が使える。
「exclude」未指定の場合、「node_modules」などのディレクトリを除外してくれる。1234"exclude": ["sample.ts",] -
files
コンパイルされるファイルを指定する。こちらはワイルドカードが使えない。
ちなみに、拡張子は省略可能。1234"files": ["sample.ts",] -
targe
エディション指定する。
(es3/es5/es6とか指定できる)1234"target": "es6"// もし消した場合、es3が適応される"target":"" -
lib
コンパイルする際に使うライブラリの指定
123456789// コメントを外した場合は、指定すること"lib":["ES6","DOM","DOM.Iterable","ScriptHost",] -
allowJs
.jsと.jsxファイルもコンパイル対象に含めるか?の設定
1"allowJs": true -
checkJs
JSファイルもTSファイルと同様にエラーチェックを出すか?の設定
1checkJs : true -
sourceMap
JSからファイルもTSファイルを生成する
jsのmapファイルで、ブラウザでTSファイルを認識できるようになる1"sourceMap": true -
outDir
指定したディレクトリにJSファイルを作成する。
ちなみに、未指定は、TSファイルと同階層に生成される。1"outDir": "./dist" -
rootDir
ルートディレクトリを指定する
ルートディレクトリ外にTSファイルを置くとエラーになる1"rootDir": "./src" -
removeComments
コンパイル後のJSファイルからコメントを削除するか?の設定
1"removeComments": true -
noEmitn
エラー発生時、JSファイルを出力するか?を設定する
ちなみに、拡張子は省略可能。1"noEmit": true -
downLevelIteratiun
ループ系の処理をした際にエラーが発生する場合がある(例:絵文字など)
FORの処理で正しく動かない場合、trueにすることを検討する
ちなみに、target: ES3、ES5の際に使用可能1"downlevelIteration": true -
strict
Strictモードを適用する
1"strict": truetsc version 4.4.2では以下の8つの項目が有効化される。個別に設定も可能
12345678// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ -
noImplicitAny
暗黙的にanyになる値をエラーにする。
1"noImplicitAny": true -
noUnusedLocals
宣言のみで使用されていない変数がある場合エラーとするか?の設定
1"noUnusedLocals": true -
noUnusedParameters
使われないkン数がある場合エラーとするか?の設定
1"noUnusedParameters": true -
noImplicitReturns
関数などで、明示的にreturn されないロジックがある場合、コンパイルエラーとするか?の設定
1"noImplicitReturns": true
次回は、TypeScript のクラスについて記載したいと思います。でわ。