2022年4月15日 りあクト! 第4章 TypeScriptの環境設定(p218~)
TypeScriptのコンパイルオプション
tsconfig.json
TypeScriptプロジェクトのコンパイラ設定を保存しておくためのファイルです。
コンパイルが実行される際、デフォルトではプロジェクトルート配下から順に探索し、最初に見つかったtsconfig.json ファイルが読み込まれて記述されている設定がコンパイラオプションとして有効になります。
config/tsconfig.json
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, // 複数のオプションがまとめて有効になる設定 "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] }
tsconfig.jsonはcreate-react-appコマンドでtypescriptを指定してプロジェクトを作成した際に生成される設定ファイルです。上記はデフォルトの内容です。
strictプロパティには以下の設定が含まれています
noImplicitAny
暗黙的にanyが指定されている式や宣言があればエラーになる
noImplicitThis
thisが暗黙的にanyを表現していればエラーになる
alwaysStrict
すべてのソースファイルの先頭に 'use strict' が記述されているものとみなし、ECMAScriptのstrictモードでパースする
strictBindCallApply
bind()、call()、apply()メソッド使用時に、その関数に渡される引数の型チェックを行う
strictNullChecks
他のすべての型から null および undefined が代入不可になる
strictFunctionTypes
関数の引数の型チェックが「共変的(Bivariant)」ではなく、「反変的 (Contravariant)」 に行われるようになる
strictPropertyInitialization
宣言だけで初期化されないクラスプロパティ(=メンバー変数)があるとエラーになる(※ strictNullChecks も併せて有効にしておく必要あり)
tsconfig.jsonのカスタマイズ
オプションの説明の続きです。
target
コンパイル先のJavaScriptのバージョンを指定するものです。
esnext
コンパイルに使われるバージョンのTypeScriptがサポートしているECMAScriptの最も新しいバージョンを示します。
lib
コンパイルに含めるライブラリを指定します。 ライブラリdomとdom.iterableはDOM操作を行うためのライブラリです。 esnextは最新のEXMAScript構文をサポートするライブラリです。
module
コンパイル後のモジュール構文をどのモジュールシステム形式にするかを設定します。 動作環境がサーバサイドのNode.jsであれば、commonjsを指定します。
noEmit
trueにするとコンパイル結果を出力しなくなります。 現行のCRAによるプロジェクト設定では tsc は構文チェックしか行わず、実際の TypeScriptのコンパイルはBabelが行ってるためです。
@babel/preset-typescript というプリセット(プラグインを特定のカテゴリーに よってまとめたもの)で TypeScript のコードから型情報を除去して ES2015 相当のコードに変換して、さらに @babel/preset-envで ES5 にコンパイルしてる
tscで型チェック・Babelでコンパイルを行う理由
tscでコンパイルを行うと、Promise等の組み込みオブジェクトをコンパイルできません。そして、babelのみでコンパイルを行うと、型チェックが行われません。tscで型チェック・Babelでコンパイルをすることによって、型チェックを行いつつコンパイルすることができます。
jsx
tsxファイルをjsxやjsにコンパイルする際の出力の形式を指定します。 react-jsxという設定は、TypeScript 4.1 から導入されたオプションで、React 17.0 以降の新しいJSX変換形式に対応するものです。
include
コンパイル対象となるファイルを指定するためのものです。 デフォルトではsrcが設定されているため、ルート直下のsrc/ディレクトリにTypeScriptファイルを置くことでコンパイルが適用されます。 もしsrcディレクトリ以外にtsファイルを配置するのならばこの設定に追加する必要があります。
カスタマイズ(デフォルトに加えて追加)した設定
baseurl
モジュールのインポートのパス指定に絶対パスを使えるようにし、起点となるディレクトリを指定するオプションです。
設定前
import MenberList from '../../organisms/MenberList';
設定後
import MenberList from 'components/organisms/MenberList';
TypeScriptの公式ドキュメントでは、非相対インポートと書かれているが、開発者の間では絶対インポートと呼ばれています。
この設定はVSCodeと相性が悪い可能性があり、新規作成したファイルでは絶対パス指定を認識してくれないことがあります。
解消方法
- shift+command+PまたはF1キーでコマンドパレットを開き >typeを入力するとリストアップされるTypeScript: Reload Projectを選択・実行する
- コンソールから
touch tsconfig.json
を実行する
downlevelIteration
コンパイルターゲットが ES5 以前 に設定されている場合でも、ES2015 から導入された各種イテレータ周りの記述(for...ofでindexの値も同時に取得したい場合やイテレータのスプレッド構文による展開)に対応させる設定です。