tsconfig.json オプション入門
tsconfig.jsonファイルを作成する。
../node_modules/.bin/tsc --init
これでルートディレクトリに作成される。
Watchモード
tsファイルの変更を監視して即座にjsファイルに変換してくれる。 なので毎回 tsc コマンドを入力する必要がなくなる。
tsc index.ts -w または --watch
終了は ctr + c
tsファイルをまとめてコンパイル
tsconfig.jsonを作成する。
tsc --init
これをすると tsc とコマンド入力するだけで、まとめてコンパイルできる。
そのまま、watchモードも使用できる。
tsc -w
tsconfig.json
オプションや設定をみていく。
exclude
特定のtsファイルを除く。こうすると compiler.ts ファイルはコンパイラされない。
"exclude": [
"compiler.ts"
]
条件を絞る事もできる。 ファイル名.spec.ts と付くファイルをコンパイルから外す。 * ワイルドカードが使用できる。
"exclude": [
"compiler.ts"
"*.spec.ts"
]
特定のフォルダ下のコンパイルを除く。
"exclude": [
"**/*.ts"
]
よく使用されるのは node_modules を取り除く。（excludeを記述しなければデフォルトで取り除く設定になっている。）
"exclude": [
"node_modules"
]
include
逆の include: [] もある。（記述しない場合はデフォルトでは全てになっている。）
これを設定すると include されてたい他のtsファイルは exclude に入ってなくてもコンパイルされないようになる。
"include": [
"index.ts"
]
include よりも exclude の方が優先される。この場合 index.ts はコンパイルされない。
"include": [
"index.ts"
],
"exclude": [
"index.ts"
]
files
files はファイルを絶対パスで指定する。ワイルドカードは使えない。 include みたいなもの。さらに exclude に入ってるファイルも指定するとコンパイルされるようになる。
files > exclude > include みたいな関係になる。
"files": [
"tmp/compiler.ts"
]
コンパイラオプション
tsconfig.json の compileOptions と書かれた各設定をみていく。
target
TypeScriptがコンパイルするJavaScriptのバージョンを指定する。デフォルトではES3になっている。
lib
TypeScriptが用意した型の定義を指定して、それを元にコンパイルする。JavaScriptで組み込まれている。 .toUpperCase() などの型を定義したファイルがあり、それをコンパイル時に読み込ませているため元々、使用出来る関数等の型定義しなくてもコンパイル時にエラーが出なくなる。
"lib": [] のように空で指定するとエラーになる。コメントアウトで何も指定しなくすると target の内容に合わせて自動で指定してくれる。
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"lib": [// コメントアウトでも内部で下記の型定義を読み込んでくれる。
"ES6",
"DOM",
"DOM.Iterable",
"ScriptHost"
],//targetがes6なので指定しても指定しなくても同じ意味になる。
//"lib": [
// "ES6",
// "DOM",
// "DOM.Iterable",
// "ScriptHost"
// ]
}
}
allowJs
JavaScriptもコンパイルする対象とする。使い所はよく分からない。
checkJs
allowJsと一緒に使ってJSファイルのエラーもチェックしてくれる。
JSX
Reactで使用する。
declaration・declarationMap
型定義ファイルを作成する。 .d.ts これを作成する。コンパイルされたJSファイルのドキュメントのような形で使用する。
sourceMap
TypeScriptをChromeの検証に読み込ませる事ができる。 ファイル名.js.map が出来る。
outDir
"outDir": "./dist" //こうするとコンパイルしたJSファイルがdistフォルダに格納される。
例えばtsファイルがsrc等のフォルダにあったとしても、distフォルダにはコンパイルされたJSファイルのみが入る。しかし ./src/tmp/index.ts と ./hello.ts のように別々の箇所にファイルがある場合は ./dist/src/tmp/index.js と ./dist/src/hello.js になる。システム側で効率の良い構成で保存してくれる。
rootDir
上記の場合にフォルダも一緒にして欲しい場合こちらを有効にする。ただし、tsファイル指定した階層よりも上にあるとエラーになる。
removeComments
tsファイル書かれたコメントをコンパイル時にJSファイルから取り除く。
noEmit
コンパイルはせずに型チェックのみを行う。ファイルを出力しない。
importHelpers・downlevelIteration
target がES5とES3のみ使用出来る。for-of をコンパイルする際に出るエラーを防ぐ。
noEmitOnError
エラーが起きたらJSファイルにコンパイルしないようにする。
strict
これを true にすると下記のコメントアウトも自動で true になる。
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true,
noImplicitAny
暗黙的なanyを避ける。型を指定せずに型推論にanyになるとエラーになる。変数の場合は値が入れば型推論で型がわかるのでエラーにならない。
strictNullChecks
null・undefinedを別の型に入れようとするとエラーになる。
strictFunctionTypes
クラスの継承時のバグを減らす。
strictBindCallApply
bind、call、apply
持ってない機能を取り込んで使用する事が出来る。
// ペンギンくん
const Penguin : {
name: string;
} = {
name: 'ペンギン',
};
// 鷹
const Falcon : {
name: string;
fly: () => void;
} = {
name: '鷹',
fly: function(): void{
console.log(this.name + 'が大空を飛びました');
}
};
Falcon.fly(); // '鷹が大空を飛びました
//第一引数にthisにしたい値を入れて使用する。
// this.nameがPenguin.nameを参照するようになる。
Falcon.fly.call(Penguin); //ペンギンが大空を飛びました。
const flyPenguin = Falcon.fly.bind(Penguin);
flyPenguin(); //ペンギンが大空を飛びました。
// 貰った引数を表示出来るように、flyメソッドを上書きする。
Falcon.fly = function(aComment){
console.log(this.name + 'が' + aComment + '大空を飛びました');
}
// call
Falcon.fly.call(Penguin, '元気よく');
// ペンギンが元気よく大空を飛びました
// bind
var flyPenguin = Falcon.fly.bind(Penguin, '元気よく');
flyPenguin();
// ペンギンが元気よく大空を飛びました
//受け取れる。引数の数を増やすためさらにメソッドを上書きする。
Falcon.fly = function(comment1, comment2){
console.log(this.name + 'が' + comment1 + comment2 + '大空を飛びました');
}
//call
Falcon.fly.call(Penguin, '思い切って', '元気よく');
// ペンギンが思い切って元気よく大空を飛びました
// applyの場合は配列で渡す。
Falcon.fly.apply(Penguin, ['思い切って', '元気よく']);
// ペンギンが思い切って元気よく大空を飛びました
bind, call, applyの引数を監視する。引数の数、型等に間違いがあればエラーを出す。
strictPropertyInitialization
クラスを使用する際に使う。
noImplicitThis
thisが暗黙的にanyを指したり、何を指定してるか分からない際にエラーを起こす。
alwaysStrict
JSファイルにコンパイルした時に "use strict" を使用する。
Additional Checks
主にこの4つでコードの品質を保つ。
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
noUnusedLocals
使ってないローカル変数はダメだという。
noUnsuedParameters
関数の引数で取る予定なのに使われない場合にエラーになる。
noImplicitReturns
暗黙的な return はだめです。下記の場合 false だと return が実行されないのでそれはダメですよとエラーになる。
function echo(message: string): string | undefined {
if (message) {
return mesage;
}
}
こうする必要がある。
function echo(message: string): string | undefined {
if (message) {
return mesage;
}
return;
}
noFallthroughCasesInSwitch
コードを綺麗にする。
Experimental Options
将来JavaScriptに追加されるかもしれない機能を実験的に使えるようにする。
参照
超TypeScript入門完全パック- TypeScriptでアプリを作りたい方必見！
記事に関するコメント等は
🕊：Twitter
📺：Youtube
📸：Instagram
👨🏻💻：Github
😥：Stackoverflow
でも受け付けています。どこかにはいます。
Discussion