Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

はじめに

ここのところ、 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 の例を表示します。

{
  "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"
  ]
}

{

"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 のような形式で設定します。

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ]
}

{

"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 のような形式で設定します。

{
  "exclude": [
    "node_modules"
  ]
}

{

"exclude": [

"node_modules"

]

}

ファイルパターンの指定の仕方は、 include と同様です。

なお、exclude プロパティが指定されていない場合は、 node_modules 、 bower_components 、 jspm_package 、 outDir が除外されます。

compilerOptions

コンパイル系オプション

target

ビルドターゲットの ECMAScript のバージョンを設定します。

{
  "compilerOptions": {
    "target": "esnext"
  }
}

{

"compilerOptions": {

"target": "esnext"

}

基本的には ES6 を指定するのが良いようですが、古い環境にデプロイされる場合はターゲットを低く設定するほうが良いようです。

設定できる値は以下のとおりです。

ES3 （デフォルト）
ES5
ES6/ES2015
ES7/ES2016
ES2017
ES2018
ES2019
ES2020
ESNext （自分のバージョンのTypeScriptがサポートしている最高のバージョン）

module

プログラムのモジュールシステムを設定します。

{
  "compilerOptions": {
    "module": "esnext"
  }
}

{

"compilerOptions": {

"module": "esnext"

}

設定できる値は以下のとおりです。

CommonJS
ES6/ES2015
ES2020
None
UMD
AMD
System
ESNext

基本的には ESNext もしくは、 ES6/ES2015 を設定すれば大丈夫です。参考までに CommonJS の場合の例を紹介します。

以下のようなファイルの場合、

import { hogeValue } from "./hoge";
export const fugaValue = hogeValue * 10;

1 2	import { hogeValue } from "./hoge"; export const fugaValue = hogeValue * 10;

ESNext では以下のようになりますが、

import { hogeValue } from "./hoge";
export const fugaValue = hogeValue * 10;

1 2	import { hogeValue } from "./hoge"; export const fugaValue = hogeValue * 10;

CommonJS では以下のようになります。

const hoge_1 = require("./hoge");
exports.fugaValue = hoge_1.hogeValue * 10;

1 2	const hoge_1 = require("./hoge"); exports.fugaValue = hoge_1.hogeValue * 10;

lib

TypeScript には Math 等の組み込みの JavaScript API の型定義や、 document 等のブラウザで利用される API の型定義がデフォルトで含まれています。これらを変更したい場合には、個別に設定することができます。

{
  "compilerOptions": {
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

{

"compilerOptions": {

"lib": [

"esnext",

"dom",

"dom.iterable",

"scripthost"

]

}

例えば、プログラムをブラウザで動作させる必要がない場合は、 dom の型定義が不要なので含めないといった事ができます。

sourceMap

ソースマップファイルの生成を有効にします。

{
  "compilerOptions": {
    "sourceMap": true
  }
}

{

"compilerOptions": {

"sourceMap": true

}

これらのファイルを使用することで、デバッガやその他のツールが、実際に生成された JavaScript ファイルを操作する際に、元の TypeScript のソースコードを表示することができます。

パス系オプション

baseUrl

相対パスでモジュール名を指定する際のベースとなるディレクトリを設定します。

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

{

"compilerOptions": {

"baseUrl": "."

}

このプロジェクトの中に baseUrl を指定すると、TypeScript は同じディレクトリで始まるファイルを探します。このプロジェクト内に ./ がある場合、 TypeScript は tsconfig.json と同じフォルダから始まるファイルを探します。

types

コンパイル対象の @types パッケージを設定します。

{
  "compilerOptions": {
    "types": [
      "webpack-env"
    ]
  }
}

{

"compilerOptions": {

"types": [

"webpack-env"

]

}

デフォルトでは、以下の対象範囲にある全ての @types パッケージがコンパイルに含まれます。

./node_modules/
../node_modules/
../../node_modules/ （以下繰り返し）

types プロパティが指定された場合、上記の範囲は含まれず、types プロパティで指定したパッケージのみが含まれます。

また、サードパーティ製の JavaScript ライブラリを使用していて、型定義ファイルが提供されていない場合、自分で型定義ファイルを作成する必要があり、作成した型定義ファイルを types に型定義ファイルを設定する必要があります。詳しくはこちらを参照してください。

paths

インポートを baseUrl からの相対的な検索位置に再マップする一連のエントリです。

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

{

"compilerOptions": {

"paths": {

"@/*": [

"src/*"

]

}

paths を使用すると、TypeScript が require/imports でインポートをどのように解決するかを宣言できます。

例えば以下のようにインポートすることができます。

// [baseUrl]/src/components/Hoge.vue をインポートする場合。
import Hoge from "@/components/Hoge.vue"

1 2	// [baseUrl]/src/components/Hoge.vue をインポートする場合。 import Hoge from "@/components/Hoge.vue"

型チェック系オプション

strict

プログラムの正しさをより強固に保証するための幅広い型チェックを行うか否かのフラグです。

{
  "compilerOptions": {
    "strict": true
  }
}

{

"compilerOptions": {

"strict": true

}

新規でプロジェクトを作成した場合は変更する必要はありません。より厳密に型チェックしたい場合は、後述する noImplicitReturs や strictNullChecks を true にすると良いでしょう。

また、既存の JavaScript で書かれているプロジェクトに TypeScript を導入する場合は false とし、後に解説する noImplictAny を false ではじめると良いでしょう。

strict 以外のパラメータをいくつか紹介します。全てのパラメータについて知りたい場合はリファレンスを参照してください。

noImplicitAny

変数の方が any 型と推論できる場合、エラーが発生します。

{
  "compilerOptions": { 
    "noImplicitAny": true
  }
}

{

"compilerOptions": {

"noImplicitAny": true

}

noImplicitReturns

関数が明示的に return してない場合、エラーが発生します。

{
  "compilerOptions": { 
    "noImplicitReturns": true
  }
}

{

"compilerOptions": {

"noImplicitReturns": true

}

strictNullChecks

null と undefined にはそれぞれ異なる型とし、具体的な値が期待される場所でこれらを使用しようとするとエラーが発生します。

{
  "compilerOptions": { 
    "strictNullChecks": true
  }
}

{

"compilerOptions": {

"strictNullChecks": true

}

さいごに

いかがでしたでしょうか。今回は Vue.js に関連するプロパティに絞って解説しましたが、より理解を深める助けになれば幸いです。

日	月	火	水	木	金	土
			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

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

はじめに

開発環境

プロジェクト作成時点のtsconfig.json

include

exclude

compilerOptions

コンパイル系オプション

target

module

lib

sourceMap

パス系オプション

baseUrl

types

paths

型チェック系オプション

strict

noImplicitAny

noImplicitReturns

strictNullChecks

さいごに

おすすめ書籍

フォロー

アプリ情報