tscconfigファイルを読む2 - コンパイラオプション１

compilerOptions

以前の投稿に続き、tsconfig.jsonの設定を確認していきます。
前回確認できていない、compilerOptionsがメインです。

基本オプション

tsconfig.json

    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
    // "lib": [],                             /* Specify library files to be included in the compilation:  */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

Option名	データ型	デフォルト値	説明
target	string	"ES3"	トランスパイル後のECMAScriptのターゲットバージョン。
module	string	target == "ES6" -> "ES6" target == それ以外 -> "CommonJS"	コード生成モジュールを指定
lib	string[]	なし ただし target == "ES5" -> DOM,ES5,ScriptHost target == "ES6" -> DOM,ES6,DOM.Iterable,ScriptHost	トランスパイルに使用するライブラリを列挙
allowJs	Boolean	false	JSファイルもトランスパイルに含めるかどうか
checkJs	Boolean	false	JSファイルのエラーも指摘する。allowJsと併用する
jsx	string	"Preserve"	.tsxファイルでJSXのサポートをする方式
declaration	Boolean	false	型定義ファイル(.d.ts)を生成するかどうか
sourceMap	Boolean	false	ソースマップ(.map)を生成するかどうか
outFile	string	なし	ソースを1つのファイルにトランスパイルし出力する先。
outDir	string	なし	ソース体系のままトランスパイルする際のルートディレクトリを指定
rootDir	string	入力ファイルから判断	入力ファイルのルートディレクトリを指定
removeComments	Boolean	false	/*!で始まるコピーライトヘッダを除くコメントをトランスパイル時に削除するかどうか
noEmit	Boolean	false	トランスパイル結果を出力しないかどうか
importHelpers	Boolean	false	tslibからemit helpersをインポートするかどうか
downlevelIteration	Boolean	false	target == "ES3" または "ES5"であるとき、for..of、spread、destructuringでIterableを完全サポートするかどうか
isolatedModuｌes	Boolean	false	それどれのファイルを分割モジュールとしてトランスパイルするかどうか

target

取りうる値：

• "ES3"
• "ES5"
• "ES6" または "ES2015"
• "ES2016"
• "ES2017"
• "ESNext"

※ESNextは最新の提案された機能をサポートするもの

トランスパイルしたらどのJSのバージョンにするのかを指示するオプション。
デフォルトは"ES3"のようですが、tsc --initの結果では"ES5"が設定してあります。
このオプションは、今後ECMAScriptの規格が更改されるたびに追加・変更されるものと考えられます。

module

取りうる値：

• "None"
• "CommonJS"
• "AMD"
• "System"
• "UMD"
• "ES6" または "ES2015"

※"AMD" と "System" はoutFileオプションと併用が必要。
※"ES6" と "ES2015" はtargetが "ES5"以降で仕様可能。

Typescriptにおけるモジュール管理をどの方式で行いますか？　という設定項目です。

設定名	対応するモジュールローダ	備考
None	なし
CommonJS	CommonJS
AMD	require.js
System	SystemJS
UMD	isomorphic	isomorphicとはもう呼ばれていないみたい
ES6 / ES2015	ECMAScript 2015 native modules

lib

取りうる値：

• ES5
• ES6
• ES2015
• ES7
• ES2016
• ES2017
• ESNext
• DOM
• DOM.Iterable
• WebWorker
• ScriptHost
• ES2015.Core
• ES2015.Collection
• ES2015.Generator
• ES2015.Iterable
• ES2015.Promise
• ES2015.Proxy
• ES2015.Reflect
• ES2015.Symbol
• ES2015.Symbol.WellKnown
• ES2016.Array.Include
• ES2017.object
• ES2017.SharedMemory
• esnext.asynciterable

トランスパイルするときに、標準APIのどれを使用しますか、という設定項目。
それぞれの意味については、探してみたのだけれども詳細なリファレンスが見つかりませんでした……。

jsx

取りうる値：

• "React"
• "Preserve"
• "React-native"

compilerOptionsの説明には記載がありませんが、Typescript-JSXのページを参照すると、"React-native"も使用できる模様。
React、React-nativeは書いてあるまんま、ReactやReact-nativeで使用する前提の設定です。
Preserveはトランスコンパイル後にいろいろする場合(Babelなど)に設定するもののようです。

sourceMap

このオプションはどちらかというとテストやトラブルシュートに役立つパラメータです。
WEBアプリケーションやnode.jsを使用するにも、最終的に読み込むのはJavascriptになります。
ソースマップはこのJavascriptとTypescriptの橋渡しを行います。
トランスパイルされたコードでエラーが発生した場合、Typescriptソース上のどこでエラーが発生したかが分かるようになります。

outFile

これを指定すると、複数ソースで構成していたファイルを１つのJavascriptソースファイルとしてトランスパイルします。
トランスパイルというか、このパラメータに限って言えば『ビルド』のイメージが近いかもしれません。

• トランスパイル：TypescriptをJavascriptに変換する
• ビルド：トランスパイルに加えて、呼び出すことができるよう１つの実行ファイルにまとめる

みたいなイメージなので。
Browserifyやwebpackを使う場合は指定しないほうがいいかも。

outDir

outFileとは異なり、それぞれのソースをそれぞれのJavascriptに出力するから、ルードディレクトリを指定してください。というもの。
後処理でBrowserifyやwebpackを使うのであればこっちを指定してあげるのがベターかも。

removeComments

Typescriptで書いていたコメントを残すかどうか、ですが、面白いのは

except copy-right header comments beginning with /*!

このオプションが指定されていてもいなくても、コピーライトヘッダコメントは残すと書かれているのですね。
Typescriptトランスパイラは/*!で始まるコメントを特別なコメントとみなしているわけです。
これは地味に大事ですね。Typescriptにはちゃんとコピーライトを書いているのに、いざトランスパイルしたらコピーライトがなくなって、どのライセンスなのか分からない！　
なんてことになってしまいますから。

noEmit

説明を読む限り、トランスパイルする際にエラーが出ないかどうか確認するためのモノのように見えますね。

importHelpers / downlevelIteration / isolatedModuｌes

ごめんなさいよく分からないです。知っている人がいたら教えてください。

型チェックオプション

tsconfig.json

    /* Strict Type-Checking Options */
    "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. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

Option名	データ型	デフォルト値	説明
strict	Boolean	false	strict型チェックモードを有効にするかどうか
noImplicitAny	Boolean	false	Any型を検知したらエラーとするかどうか
strictNullChecks	Boolean	false	Null安全にするかどうか
noImplicitThis	Boolean	false	thisで指定されたオブジェクトがAny型となる時エラーとするか
alwaysStrict	Boolean	false	strictモードでパースし、各ファイルにuser strictを付与するかどうか

noImplicitAny / noImplicitThis

『Any安全』を実現するためのオプションです。
Typescriptの思想上、何でも扱うことのできるAny型でのアクセスをしないようにしたいがためのオプションだと思います。
ただ、『何でも突っ込める型』というのは時に役に立つ時もありますから、(JavaでいうObject型の扱いみたいな)、ケースバイケースでしょうね。

strictNullChecks

nullへのアクセスを認めないよ、という宣言です。いわゆるNull安全です。KotlinやRust、SwiftでNUll安全が実装されていますね。
ただし、注意しなければならないことが。
undefinedはnullでないからアクセス可能です。

example

let variable = null;

はトランスパイラがエラーとする一方で、

sample

let variable = undefined;

は許容、ということです。

次回に続く………

案の定すごく長くなってしまったので、ここで一旦区切りたいと思います。
次回、[Additional Checks]から記事にしたいと思います。

Reference

tsconfig.json
module
JSX