ここのところ、 Vue.jsと TypeScript を触る機会が増えているのですが、 tsconfig.json などの設定ファイルについては特に意識していませんでした。
そこで今回は、 Vue.js ＋ TypeScript な環境で開発する際の tsconfig.json のパラメータについて解説します。
主なライブラリ等のバージョンは以下のとおりです。
まず初めにプロジェクト作成時点の tsconfig.json の例を表示します。
{
"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 については、デフォルトのままで大丈夫です。詳細はリファレンスを参照してください。
コンパイル対象のファイルパターンを glob のような形式で設定します。
{
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
]
} サポートされるワイルドカードは以下のとおりです。
globパターンの部分が * もしくは、 .* のみの場合、以下の拡張子のファイルのみが含まれます。
また、 include に指定されたファイルによって参照されるファイルもコンパイル対象に含まれます。
コンパイル対象から除外するファイルパターンを glob のような形式で設定します。
{
"exclude": [
"node_modules"
]
} ファイルパターンの指定の仕方は、 include と同様です。
なお、exclude プロパティが指定されていない場合は、 node_modules 、 bower_components 、 jspm_package 、 outDir が除外されます。
ビルドターゲットの ECMAScript のバージョンを設定します。
{
"compilerOptions": {
"target": "esnext"
}
} 基本的には ES6 を指定するのが良いようですが、古い環境にデプロイされる場合はターゲットを低く設定するほうが良いようです。
設定できる値は以下のとおりです。
プログラムのモジュールシステムを設定します。
{
"compilerOptions": {
"module": "esnext"
}
} 設定できる値は以下のとおりです。
基本的には ESNext もしくは、 ES6/ES2015 を設定すれば大丈夫です。参考までに CommonJS の場合の例を紹介します。
以下のようなファイルの場合、
import { hogeValue } from "./hoge";
export const fugaValue = hogeValue * 10; ESNext では以下のようになりますが、
import { hogeValue } from "./hoge";
export const fugaValue = hogeValue * 10; CommonJS では以下のようになります。
const hoge_1 = require("./hoge");
exports.fugaValue = hoge_1.hogeValue * 10; TypeScript には Math 等の組み込みの JavaScript API の型定義や、 document 等のブラウザで利用される API の型定義がデフォルトで含まれています。これらを変更したい場合には、個別に設定することができます。
{
"compilerOptions": {
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
} 例えば、プログラムをブラウザで動作させる必要がない場合は、 dom の型定義が不要なので含めないといった事ができます。
ソースマップファイルの生成を有効にします。
{
"compilerOptions": {
"sourceMap": true
}
} これらのファイルを使用することで、デバッガやその他のツールが、実際に生成された JavaScript ファイルを操作する際に、元の TypeScript のソースコードを表示することができます。
相対パスでモジュール名を指定する際のベースとなるディレクトリを設定します。
{
"compilerOptions": {
"baseUrl": "."
}
} このプロジェクトの中に baseUrl を指定すると、TypeScript は同じディレクトリで始まるファイルを探します。このプロジェクト内に ./ がある場合、 TypeScript は tsconfig.json と同じフォルダから始まるファイルを探します。
コンパイル対象の @types パッケージを設定します。
{
"compilerOptions": {
"types": [
"webpack-env"
]
}
} デフォルトでは、以下の対象範囲にある全ての @types パッケージがコンパイルに含まれます。
types プロパティが指定された場合、上記の範囲は含まれず、types プロパティで指定したパッケージのみが含まれます。
また、サードパーティ製の JavaScript ライブラリを使用していて、型定義ファイルが提供されていない場合、自分で型定義ファイルを作成する必要があり、作成した型定義ファイルを types に型定義ファイルを設定する必要があります。詳しくはこちらを参照してください。
インポートを baseUrl からの相対的な検索位置に再マップする一連のエントリです。
{
"compilerOptions": {
"paths": {
"@/*": [
"src/*"
]
}
}
} paths を使用すると、TypeScript が require/imports でインポートをどのように解決するかを宣言できます。
例えば以下のようにインポートすることができます。
// [baseUrl]/src/components/Hoge.vue をインポートする場合。 import Hoge from "@/components/Hoge.vue"
プログラムの正しさをより強固に保証するための幅広い型チェックを行うか否かのフラグです。
{
"compilerOptions": {
"strict": true
}
} 新規でプロジェクトを作成した場合は変更する必要はありません。より厳密に型チェックしたい場合は、後述する noImplicitReturs や strictNullChecks を true にすると良いでしょう。
また、既存の JavaScript で書かれているプロジェクトに TypeScript を導入する場合は false とし、後に解説する noImplictAny を false ではじめると良いでしょう。
strict 以外のパラメータをいくつか紹介します。全てのパラメータについて知りたい場合はリファレンスを参照してください。
変数の方が any 型と推論できる場合、エラーが発生します。
{
"compilerOptions": {
"noImplicitAny": true
}
} 関数が明示的に return してない場合、エラーが発生します。
{
"compilerOptions": {
"noImplicitReturns": true
}
} null と undefined にはそれぞれ異なる型とし、具体的な値が期待される場所でこれらを使用しようとするとエラーが発生します。
{
"compilerOptions": {
"strictNullChecks": true
}
} いかがでしたでしょうか。今回は Vue.js に関連するプロパティに絞って解説しましたが、より理解を深める助けになれば幸いです。