TypeScript に対応した Vue 3 プロジェクトの作成

Vue.js では JavaScript だけでなく TypeScript をサポートしています。以下のグラフでもわかるように、素の JavaScript は長年人気 No.1 の座を維持していますが、ここ数年で TypeScript の人気が上昇してきています。

引用元： GitHub Octoverse

TypeScript は JavaScript の雰囲気をもつものですが、以下のような特徴が人気の要因かもしれません。

JavaScript の機能をサポートしている
高度な型システム
IDE のサポート

こういった背景もあり、本記事では TypeScript を用いて Vue プロジェクトを作成していこうと思います。

なお Vue.js では 2022 年 2 月よりそれまでの Vue2 に代わり Vue3 がデフォルトとなっていますので、本記事でも Vue3 で進めていきたいと思います。

macOS: 12.1
vue: 3.2.1
typescript: 4.5.5

Vue 3 プロジェクト作成

[ads]

Quick Start | Vue.js の手順を参考に、 create-vue を用いて Vue3 プロジェクトを作成していきます。以前は Vue CLI の vue create コマンドを利用することが推奨されていましたが Vue CLI は既にメンテナンスモードとなっているため create-vue が推奨となっています。

npm init vue@3 コマンドを実行すると対話式でプロジェクト名称や言語やフレームワークのサポートを含めるかどうかといった各種プロジェクトオプションを選択することができます。ここではプロジェクト名称を決める以外は簡潔にするため Add TypeScript のみ Yes とし、その他は No を選択して進めます。

npm init vue@3

% npm init vue@3

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3-typescript
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /xxxx/xxxx...

Done. Now run:

  cd vue3-typescript
  npm install
  npm run dev

TypeScript で作成した Vue 3 プロジェクトの実行

[ads]

プロジェクトが作成できましたので何はともあれプロジェクト作成時に示される手順をつかって実行してみたいと思います。なお vue-create で作成したプロジェクトではサーバーが Vite に変更されています。

Vite には既存のサーバが抱える以下の問題を解決できるようで、個人的にも従来のものよりぐっと高速になった実感がありました。

起動の遅いサーバ
遅い更新

Vue 3 プロジェクト初期設定確認

[ads]

それでは作成されたプロジェクトから TypeScript ならではの部分を確認していきます。まず最初にプロジェクトのルートディレクトリに存在する tsconfig.json から見ていきます。

tsconfig.json

tsconfig.json は TypeScript プロジェクトのルートディレクトリに配置され、ルートファイルとコンパイラオプションを指定することができます。 vue-create で作成された初期状態の tsconfig.json は以下のようになっています。

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

内容を簡単にみていきます。

項目	説明
extends	大元となる継承元の設定ファイルを指定。今回の例では、指定したファイルからさらに参照されている tsconfig.json に記載されている compilerOptions が有効になります。
include	プロジェクトに含める TypeScript ファイルを指定 – ルートディレクトリの env.d.tssrc – ディレクトリ内のサブディレクトリ配下のファイル例）src/main.tssrc – ディレクトリ内のサブディレクトリ配下のファイル (拡張子 .vue) 例）src/components/HelloWorld.vue
compilerOptions	コンパイラオプションを指定。上述の通り、基本的なオプションはextendsで指定されたファイルに記載があり、ここでは、以下のみを指定 – baseUrl: ベースディレクトリとして tsconfig.json と同じディレクトリを指定 – paths: インポートするファイルの検索パス。
references	アプリケーション自体とは直接関係しないが、プロジェクトの実行に必要な TSConfig ファイルを指定します。この例では、サーバである vite に関連した設定を読み込んでいます。