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


関連記事

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

react-icon

React QueryのSuspese Modeを使ってみた! [TypeScript]

1 はじめに2 React Suspenseとは3 React QueryのSuspense Mode3.1 事前準備3.2 Suspenseモードの有効化3.3 データをフェッチするコンポーネントの ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

フォロー

blog-page_side_responsive

2020年4月
 1234
567891011
12131415161718
19202122232425
2627282930  

アプリ情報

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