６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2022年4月15日 りあクト！ 第4章 TypeScriptの環境設定（p218~)

TypeScript

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の値も同時に取得したい場合やイテレータのスプレッド構文による展開）に対応させる設定です。

参考

りあクト！ 【Ⅰ. 言語・環境編】 p.218~

tscとBabel