【Typescript×React】tsconfig.jsonの設定項目を詳しく紹介

つい一週間前にTypescriptに入門した新卒エンジニアです。

React × Reduxのアプリケーションにおいて、Typescriptを導入したのですが、エラーを吐いてしまうことが度々あり、構文に問題が見つからず途方に暮れているところで、tsconfig.jsonの設定を見直してみると、問題なくコンパイルできたということがあったので、今回はその設定項目について細かくまとめていきたいと思います。

まず現在私が作成しているファイルのtsconfig.jsは以下のようになっています。（create-react-app appname --typescriptで作成すると以下のようになっているはずです。）

一つひとつ説明していきます。

tsconfig.json

{
// コンパイルに関するオプションを設定
  "compilerOptions": {
// ECMAScript target versionを指定
    "target": "es5",
// ビルドする際に含めるlibraryファイル
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
//JSファイルのビルドを可能に
    "allowJs": true,
//暗黙のany型をエラーに
    "noImplicitAny": false,
//型宣言ファイルの型チェックをスキップする
    "skipLibCheck": true,
// CommonJSモジュールとESモジュール間の相互運用性を,すべてのインポート用に名前空間オブジェクトを作成することで可能に
    "esModuleInterop": true,
//エキスポートしないモジュールからのインポートを許可するか（型チェックのみに影響）
    "allowSyntheticDefaultImports": true,
//厳密な型チェックオプションを有効に
    "strict": true,
//大文字小文字を区別して参照を解決するようにする
    "forceConsistentCasingInFileNames": true,
//生成されるモジュールコードを指定
    "module": "esnext",
//モジュール解決戦略を指定する: 'node'（Node.js）または 'classic'
    "moduleResolution": "node",
//自分で型定義を行う必要なく json ファイルを扱うことを可能に
    "resolveJsonModule": true,
//各々のファイルを別のモジュールとして変換
    "isolatedModules": true,
    "noEmit": true,
//tsx拡張子においてJSXサポートを行うか
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}