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


関連記事

[Next.js]FirestoreのデータをServer Componentから取得する

1 はじめに2 Next.jsでFirestoreからデータを取得する方法2.1 Client Componentで直接Firestoreから取得2.2 Route Handlerを使ってAPI化し、 ...

icon

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

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

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

Next.jsでJSON-LDを実装する

1 はじめに2 リッチリザルトとは3 構造化データとは4 Next.jsでJSON-LDを実装4.1 JSON-LDデータの作成4.2 JSON-LDデータの埋め込み5 リッチリザルトテスト6 さいご ...

tailwindcss

Tailwind CSSの基礎とVue.jsへの導入

1 はじめに2 Tailwind CSSとは2.1 utility class3 Bootstrapとの比較3.1 柔軟性3.2 コード量3.3 学習コスト3.4 ファイルサイズ3.5 その他4 なぜ ...

フォロー

blog-page_side_responsive

2020年4月
 1234
567891011
12131415161718
19202122232425
2627282930  

アプリ情報

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