FrontEnd

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

この内、 jsx 、 importHelpers 、 moduleResolution 、 experimentalDecorators 、  esModuleInterop 、 allowSyntheticDefaultImports については、デフォルトのままで大丈夫です。詳細はリファレンスを参照してください。

include

コンパイル対象のファイルパターンを glob のような形式で設定します。

サポートされるワイルドカードは以下のとおりです。

  • * 0文字以上の文字にマッチ(ディレクトリ区切りを除く)
  • ? 1文字以上の文字にマッチ(ディレクトリ区切りを除く)
  • **/ サブディレクトリを再帰的にマッチ

globパターンの部分が * もしくは、 .* のみの場合、以下の拡張子のファイルのみが含まれます。

  • .ts
  • .tsx
  • .d.ts
  • .js (allowJs が true の場合のみ)
  • .jsx(allowJs が true の場合のみ)

また、 include に指定されたファイルによって参照されるファイルもコンパイル対象に含まれます。

exclude

コンパイル対象から除外するファイルパターンを glob のような形式で設定します。

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

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

compilerOptions

コンパイル系オプション

target

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

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

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

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

module

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

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

  • CommonJS
  • ES6/ES2015
  • ES2020
  • None
  • UMD
  • AMD
  • System
  • ESNext

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

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

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

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

lib

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

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

sourceMap

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

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

パス系オプション

baseUrl

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

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

types

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

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

  • ./node_modules/
  • ../node_modules/
  • ../../node_modules/ (以下繰り返し)

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

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

paths

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

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

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

型チェック系オプション

strict

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

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

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

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

noImplicitAny

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

noImplicitReturns

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

strictNullChecks

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

さいごに

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

おすすめ書籍

確かな力が身につくJavaScript「超」入門 第2版  プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発  Vue.js入門 基礎から実践アプリケーション開発まで

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年4月
 1234
567891011
12131415161718
19202122232425
2627282930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。