compilerOptions
以前の投稿に続き、tsconfig.jsonの設定を確認していきます。
前回確認できていない、compilerOptionsがメインです。
基本オプション
/* 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
ごめんなさいよく分からないです。知っている人がいたら教えてください。
型チェックオプション
/* 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でないからアクセス可能です。
let variable = null;
はトランスパイラがエラーとする一方で、
let variable = undefined;
は許容、ということです。
次回に続く………
案の定すごく長くなってしまったので、ここで一旦区切りたいと思います。
次回、[Additional Checks]から記事にしたいと思います。