Nuxt.jsを利用する場合のtsconfig.json について考える

TypeScript

目次

tsconfig.json とは

TypeScriptを開発言語としたプロジェクトにおいて、アプリのビルド時にJavaScriptへコンパイルする対象となる（プロジェクトに含まれる）TypeScriptファイル（.tsファイル）と、それらをJavaScriptコードへコンパイルする際のコンパイルオプションなどを指定する設定ファイルです。

compilerOptions

基本オプション

target

TypescriptをコンパイルしてJavascriptに変換したときに、どのECMSScriptのバージョンにするかを指定できるオプションです。ECMAScriptはどんどん増えていきますが各ブラウザのエンジンはすぐには追いつけていない状況です。ESNextはこのまだ実質使えないものも含めた来年出る最新のECMAScriptのバージョンを意味します。

Typescriptを利用しない場合、Babelというトランスパイラを利用してESNextで書かれたコードをES5に変換させるという手法が多くの開発で利用されています。Typescriptを利用すればBabelは不要となりますが、Jestを利用してテスト環境を整える場合にBabel等が必要となる場合があります

  • ES3（デフォルト）
  • ES5
  • ES6 または、 ES2015
  • ES2016
  • ES2017
  • ES2018
  • ESNext

ここでは、最新のECMAScriptを利用してコーディングできるように ESNext を選択しました。

module

コード生成モジュールを指定できるオプションです。

  • None
  • CommonJS
  • AMD
  • System
  • UMD
  • ES6 または、 ES2015
  • ESNext

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

ここでは、最新のコード生成モジュールを利用できるように ESNext を選択しました。

lib

トランスパイルするときに標準APIのどれを使用しますか、という設定項目。使用するライブラリを列挙します。

  • esnext
  • esnext.asynciterable
  • dom

“allowJs”: true

javascriptファイルをコンパイルできるようにします。

“sourceMap”: true

対応する .mapファイルを生成します。

“removeComments”: true

コメントを出力しません。

“noEmit”: true

出力を出力しません。

“experimentalDecorators”: true

デコレータの実験的なサポートを有効にします

厳密な型チェックオプション

“strict”: true

すべての厳密な型チェックオプションを有効にします。

“noImplicitAny”: true

暗黙の any型で式と宣言のエラーを発生させます。

“strictNullChecks”: true

厳密なヌルチェックを有効にします。

モジュール解決オプション

“moduleResolution”: “node”

モジュール解決戦略を指定する: node（Node.js）または classic（TypeScript pre-1.6）

“baseUrl”: “.”

非絶対モジュール名を解決するためのベースディレクトリ。

paths

baseUrl’に相対的な参照位置にインポートを再マップする一連のエントリ。

"paths": {
    "@/*": [
        "src/*"
    ],
    "~/*": [
        "src/*"
    ]
}

types

コンパイルに含める宣言ファイルを入力します。

"types": [
    "@types/node",
    "@types/jest",
    "@types/webpack",
    "@nuxt/vue-app"
] 

“esModuleInterop”: true

CommonJSモジュールとESモジュール間の相互運用性を,すべてのインポート用に名前空間オブジェクトを作成することで可能にします。 「allowSyntheticDefaultImports」を暗示します。

exclude

コンパイルから除外するファイルのリストを指定します。excludeプロパティは ‘include’プロパティに含まれるファイルのみに影響し、 filesプロパティには影響しません。

"exclude": [
    "node_modules"
]

include

コンパイルに含めるファイルと一致するグロブパターンのリストを指定します。tsconfig.jsonに filesまたは includeプロパティがない場合、コンパイラはデフォルトで、 ‘exclude’で指定されたサブディレクトリ以外のサブディレクトリ。TypeScriptバージョン2.0以降が必要です。

"include": [
    "src/**/*.ts",
    "src/**/*.vue"
]     

完成したtsconfig.json

以下は、Nuxt.jsを利用した開発で利用している設定ファイルです。コメントで日本語訳を記載しました。

{
  "compilerOptions": {
    /* 基本オプション */

    "target": "esnext",                       /* ECMAScriptのターゲットバージョンを指定します: 'ES3'（デフォルト）, 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018'または 'ESNEXT' */
    "module": "esnext",                       /* モジュールコード生成: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015',または 'ESNext'を指定します。 */
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],                                        /* コンパイルに含めるライブラリファイルを指定します。 */
    "allowJs": true,                          /* javascriptファイルをコンパイルできるようにします。 */
    // "checkJs": true,                       /* .jsファイルのエラーを報告します。 */
    // "jsx": "preserve",                     /* JSXコード生成を指定する: 'preserve', 'react-native',または 'react'。 */
    // "declaration": true,                   /* 対応する '.d.ts'ファイルを生成します。 */
    // "declarationMap": true,                /* 対応する '.d.ts'ファイルごとにソースマップを生成します。 */
    "sourceMap": true,                        /* 対応する '.map'ファイルを生成します。 */
    // "outFile": "./",                       /* 1つのファイルに連結して出力​​します。 */
    // "outDir": "./",                        /* 出力構造をディレクトリにリダイレクトします。 */
    // "rootDir": "./",                       /* 入力ファイルのルートディレクトリを指定します。 --outDirを使用して出力ディレクトリ構造を制御するために使用します。 */
    // "composite": true,                     /* プロジェクトのコンパイルを有効にする*/
    "removeComments": true,                   /* コメントを出力しません。 */
    "noEmit": true,                           /* 出力を出力しません。 */
    // "importHelpers": true,                 /* Importは 'tslib'からヘルパーを出します。 */
    // "downlevelIteration": true,            /* 'for', 'spread', 'destructuring'のiterablesを完全にサポートします。 'ES5'または 'ES3'を対象としています。 */
    // "isolatedModules": true,               /* 各ファイルを個別のモジュールとしてトランスポートします（ 'ts.transpileModule'に似ています）。 */
    "experimentalDecorators": true,           /* デコレータの実験的なサポートを有効にします */
    "resolveJsonModule": true,                /* JSONファイルから型の抽出・生成を行います。 */

    /* 厳密な型チェックオプション */

    "strict": true,                          /* すべての厳密な型チェックオプションを有効にします。 */
    "noImplicitAny": false,                   /* 暗黙の 'any'型で式と宣言のエラーを発生させます。 */
    "strictNullChecks": true,                 /* 厳密なヌルチェックを有効にします。 */
    // "strictFunctionTypes": true,           /* 関数型の厳密なチェックを有効にします。 */
    // "strictPropertyInitialization": true,  /* クラスのプロパティ初期化の厳密なチェックを有効にします。 */
    "noImplicitThis": true,                   /* 暗黙の 'any'型で 'this'式のエラーを発生させます。 */
    // "alwaysStrict": true,                  /* 厳密なモードで解析し,各ソースファイルに対して "use strict"を発行します。 */

    /* 追加チェック */
    // "noUnusedLocals": true,                /* 未使用のローカルのエラーを報告します。 */
    // "noUnusedParameters": true,            /* 未使用のパラメータのエラーを報告します。 */
    // "noImplicitReturns": true,             /* 関数内のすべてのコードパスが値を返さない場合,エラーを報告します。 */
    // "noFallthroughCasesInSwitch": true,    /* switchステートメントのfallthrough caseのエラーを報告します。 */

    /* モジュール解決オプション*/
    "moduleResolution": "node",               /* モジュール解決戦略を指定する: 'node'（Node.js）または 'classic'（TypeScript pre-1.6）。 */
    "baseUrl": ".",                           /* 非絶対モジュール名を解決するためのベースディレクトリ。 */
    "paths": {
      "@/*": [
        "src/*"
      ],
      "~/*": [
        "src/*"
      ]
    },                                        /* 'baseUrl'に相対的な参照位置にインポートを再マップする一連のエントリ。 */
    // "rootDirs": [],                        /* 結合コンテンツが実行時にプロジェクトの構造を表すルートフォルダのリスト。 */
    // "typeRoots": [],                       /* タイプ定義を含むフォルダのリスト。 */
    "types": [
      "@types/node",
      "@types/jest",
      "@types/webpack",
      "@nuxt/vue-app"
    ],                                        /* コンパイルに含める宣言ファイルを入力します。 */
    // "allowSyntheticDefaultImports": true,  /* デフォルトのエクスポートがないモジュールからのデフォルトのインポートを許可します。これはコードの出力には影響しません。型検査だけです。 */
    "esModuleInterop": true,                  /* CommonJSモジュールとESモジュール間の相互運用性を,すべてのインポート用に名前空間オブジェクトを作成することで可能にします。 「allowSyntheticDefaultImports」を暗示します。 */
    // "preserveSymlinks": true,              /* シンボリックリンクの実際のパスを解決しません。 */

    /* ソースマップオプション */
    // "sourceRoot": "",                      /* デバッガがソースの場所の代わりにTypeScriptファイルを探す場所を指定します。 */
    // "mapRoot": "",                         /* デバッガが生成された場所の代わりにマップファイルを配置する場所を指定します。 */
    // "inlineSourceMap": true,               /* 別のファイルを持つ代わりに,ソースマップで単一のファイルを出力します。 */
    // "inlineSources": true                  /* ソースをその内部のソースマップと一緒に出力します。

  },
  // "files": [],                             /* tsconfig.jsonに 'files'または 'include'プロパティがない場合、コンパイラはデフォルトで 'exclude'で指定されたディレクトリとサブディレクトリ以外のすべてのファイルを含むようにします。が指定されている場合、それらのファイルと 'include'で指定されたファイルのみが含まれます。 */
  "exclude": [
    "node_modules",
    "stories"
  ],                                          /* コンパイルから除外するファイルのリストを指定します。 'exclude'プロパティは 'include'プロパティに含まれるファイルのみに影響し、 'files'プロパティには影響しません。 */
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ]                                           /* コンパイルに含めるファイルと一致するグロブパターンのリストを指定します。tsconfig.jsonに 'files'または 'include'プロパティがない場合、コンパイラはデフォルトで、 'exclude'で指定されたサブディレクトリ以外のサブディレクトリ。TypeScriptバージョン2.0以降が必要です。例:"src\/**\/*" */
  // "compileOnSave": true,                   /* このプロジェクトでコンパイル時保存を有効にする */
  // "extends": "",                           /* 継承元の基本構成ファイルへのパス.TypeScriptバージョン2.1以降が必要です。 */
  // "typeAcquisition": {                     /* このプロジェクトの宣言ファイル（.d.ts）取得オプション。Type 2.1以降のバージョンが必要です。 */
  //   "enable": false,                       /* 宣言ファイルの自動取得を有効にする */
  //   "include": [],                         /* 宣言ファイルの自動取得から除外される型宣言のリストを指定します。例:[\"jquery\",\"lodash\"]  */
  //   "exclude": []                          /* 宣言ファイルの自動取得に含める型宣言のリストを指定します。例:[\"jquery\", \"lodash\"] */
  // },
  // "references": [                          /* "参照されたプロジェクト。TypeScriptバージョン3.0以降が必要です。 */
  //   {
  //     "path": ""                           /* 参照されたtsconfigまたはtsconfigを含むフォルダへのパス。例:"..\/core\/" \"compilerOptions\"に\"composite\": true, \"declaration\": true が必要。\"outDir\": \"../../lib/bar\", \"strict\": true, \"module\": \"esnext\", \"moduleResolution\": \"node\"が関係する。 */
  //   }
  // ]

}
/ TypeScript / コメント数(0)

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。