はじめに
ここのところ、 Vue.jsと TypeScript を触る機会が増えているのですが、 tsconfig.json などの設定ファイルについては特に意識していませんでした。
そこで今回は、 Vue.js ＋ TypeScript な環境で開発する際の tsconfig.json のパラメータについて解説します。
開発環境
主なライブラリ等のバージョンは以下のとおりです。
- node v13.2.0
- npm 6.13.1
- @vue/cli 4.1.1
プロジェクト作成時点のtsconfig.json
まず初めにプロジェクト作成時点の tsconfig.json の例を表示します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] } |
この内、 jsx 、 importHelpers 、 moduleResolution 、 experimentalDecorators 、 esModuleInterop 、 allowSyntheticDefaultImports については、デフォルトのままで大丈夫です。詳細はリファレンスを参照してください。
include
コンパイル対象のファイルパターンを glob のような形式で設定します。
| 1 2 3 4 5 6 7 8 9 | { "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ] } |
サポートされるワイルドカードは以下のとおりです。
- * 0文字以上の文字にマッチ（ディレクトリ区切りを除く）
- ? 1文字以上の文字にマッチ（ディレクトリ区切りを除く）
- **/ サブディレクトリを再帰的にマッチ
globパターンの部分が * もしくは、 .* のみの場合、以下の拡張子のファイルのみが含まれます。
- .ts
- .tsx
- .d.ts
- .js （allowJs が true の場合のみ）
- .jsx（allowJs が true の場合のみ）
また、 include に指定されたファイルによって参照されるファイルもコンパイル対象に含まれます。
exclude
コンパイル対象から除外するファイルパターンを glob のような形式で設定します。
| 1 2 3 4 5 | { "exclude": [ "node_modules" ] } |
ファイルパターンの指定の仕方は、 include と同様です。
なお、exclude プロパティが指定されていない場合は、 node_modules 、 bower_components 、 jspm_package 、 outDir が除外されます。
compilerOptions
コンパイル系オプション
target
ビルドターゲットの ECMAScript のバージョンを設定します。
| 1 2 3 4 5 | { "compilerOptions": { "target": "esnext" } } |
基本的には ES6 を指定するのが良いようですが、古い環境にデプロイされる場合はターゲットを低く設定するほうが良いようです。
設定できる値は以下のとおりです。
- ES3 （デフォルト）
- ES5
- ES6/ES2015
- ES7/ES2016
- ES2017
- ES2018
- ES2019
- ES2020
- ESNext （自分のバージョンのTypeScriptがサポートしている最高のバージョン）
module
プログラムのモジュールシステムを設定します。
| 1 2 3 4 5 | { "compilerOptions": { "module": "esnext" } } |
設定できる値は以下のとおりです。
- CommonJS
- ES6/ES2015
- ES2020
- None
- UMD
- AMD
- System
- ESNext
基本的には ESNext もしくは、 ES6/ES2015 を設定すれば大丈夫です。参考までに CommonJS の場合の例を紹介します。
以下のようなファイルの場合、
| 1 2 | import { hogeValue } from "./hoge"; export const fugaValue = hogeValue * 10; |
ESNext では以下のようになりますが、
| 1 2 | import { hogeValue } from "./hoge"; export const fugaValue = hogeValue * 10; |
CommonJS では以下のようになります。
| 1 2 | const hoge_1 = require("./hoge"); exports.fugaValue = hoge_1.hogeValue * 10; |
lib
TypeScript には Math 等の組み込みの JavaScript API の型定義や、 document 等のブラウザで利用される API の型定義がデフォルトで含まれています。これらを変更したい場合には、個別に設定することができます。
| 1 2 3 4 5 6 7 8 9 10 | { "compilerOptions": { "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] } } |
例えば、プログラムをブラウザで動作させる必要がない場合は、 dom の型定義が不要なので含めないといった事ができます。
sourceMap
ソースマップファイルの生成を有効にします。
| 1 2 3 4 5 | { "compilerOptions": { "sourceMap": true } } |
これらのファイルを使用することで、デバッガやその他のツールが、実際に生成された JavaScript ファイルを操作する際に、元の TypeScript のソースコードを表示することができます。
パス系オプション
baseUrl
相対パスでモジュール名を指定する際のベースとなるディレクトリを設定します。
| 1 2 3 4 5 | { "compilerOptions": { "baseUrl": "." } } |
このプロジェクトの中に baseUrl を指定すると、TypeScript は同じディレクトリで始まるファイルを探します。このプロジェクト内に ./ がある場合、 TypeScript は tsconfig.json と同じフォルダから始まるファイルを探します。
types
コンパイル対象の @types パッケージを設定します。
| 1 2 3 4 5 6 7 | { "compilerOptions": { "types": [ "webpack-env" ] } } |
デフォルトでは、以下の対象範囲にある全ての @types パッケージがコンパイルに含まれます。
- ./node_modules/
- ../node_modules/
- ../../node_modules/ （以下繰り返し）
types プロパティが指定された場合、上記の範囲は含まれず、types プロパティで指定したパッケージのみが含まれます。
また、サードパーティ製の JavaScript ライブラリを使用していて、型定義ファイルが提供されていない場合、自分で型定義ファイルを作成する必要があり、作成した型定義ファイルを types に型定義ファイルを設定する必要があります。詳しくはこちらを参照してください。
paths
インポートを baseUrl からの相対的な検索位置に再マップする一連のエントリです。
| 1 2 3 4 5 6 7 8 9 | { "compilerOptions": { "paths": { "@/*": [ "src/*" ] } } } |
paths を使用すると、TypeScript が require/imports でインポートをどのように解決するかを宣言できます。
例えば以下のようにインポートすることができます。
| 1 2 | // [baseUrl]/src/components/Hoge.vue をインポートする場合。 import Hoge from "@/components/Hoge.vue" |
型チェック系オプション
strict
プログラムの正しさをより強固に保証するための幅広い型チェックを行うか否かのフラグです。
| 1 2 3 4 5 | { "compilerOptions": { "strict": true } } |
新規でプロジェクトを作成した場合は変更する必要はありません。より厳密に型チェックしたい場合は、後述する noImplicitReturs や strictNullChecks を true にすると良いでしょう。
また、既存の JavaScript で書かれているプロジェクトに TypeScript を導入する場合は false とし、後に解説する noImplictAny を false ではじめると良いでしょう。
strict 以外のパラメータをいくつか紹介します。全てのパラメータについて知りたい場合はリファレンスを参照してください。
noImplicitAny
変数の方が any 型と推論できる場合、エラーが発生します。
| 1 2 3 4 5 | { "compilerOptions": { "noImplicitAny": true } } |
noImplicitReturns
関数が明示的に return してない場合、エラーが発生します。
| 1 2 3 4 5 | { "compilerOptions": { "noImplicitReturns": true } } |
strictNullChecks
null と undefined にはそれぞれ異なる型とし、具体的な値が期待される場所でこれらを使用しようとするとエラーが発生します。
| 1 2 3 4 5 | { "compilerOptions": { "strictNullChecks": true } } |
さいごに
いかがでしたでしょうか。今回は Vue.js に関連するプロパティに絞って解説しましたが、より理解を深める助けになれば幸いです。
おすすめ書籍
![](<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=12&l=ur1&category=amazonrotate&f=ifr&linkID=b58084340147c66533fd679fc7896f47&t=nukky1985-22&tracking_id=nukky1985-22" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>)
![](<iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?o=9&p=42&l=ur1&category=literaturebooks&banner=0E3R1FMFGRH02M3C66R2&f=ifr&linkID=f9a0550b8551699876e6550703fc853b&t=nukky1985-22&tracking_id=nukky1985-22" width="234" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>)