TechVue.jsJapanese

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

Tech

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

npm init [email protected]
% npm init [email protected]

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 に関連した設定を読み込んでいます。
tsconfig.json に記載されている設定

特別な理由がない限り、このままの設定で進めてしまっても問題なさそうです。


Volar セットアップ

[ads]

本記事の最後に VSCode での開発に便利な プラグイン の セットアップ をしていきます。 Vue2 までは Vetur を使うことも多かったのですが、Vue 創始者 の Evan You が アナウンス したように Vue3 では Volar を使うのが良さそうです。

Volar の インストール

Volar は以下の リンク から VSCode にインストール していきます。

TypeScript Vue Plugin (Volar) - Visual Studio Marketplace
Extension for Visual Studio Code - Vue Plugin for TypeScript server

ただし TypeScript の場合、  Vue.js 公式 サイト にも紹介されている通り より効率よく使用するためには Takeover モード を設定する必要があります。

Takeover モード の設定

Takeover モード と言っても VSCode の ビルトイン TypeScript サービス である TypeScript and JavaScript Language Features” を ワークスペース で Disabled にするだけです。

  • Cmd + Shift + P で コマンドパレットを起動し、 “built” と入力し、表示される以下を選択します。

    Extensions: Show Built-in Extensions
  • “@builtin” に続けて “typescript” と入力し、 表示される TypeScript and JavaScript Language Features の歯車 アイコン を クリック し Disable (Workspace) を選択します。
  • “Reload Required” ボタン が表示されるので、 これを クリック して ワークスペース を リロード します。
  • ワークスペース リロード 後に 以下のように TypeScript and JavaScript Language Features が グレーアウト され 無効化されていることを確認します。

まとめ

[ads]
  • Vue3 プロジェクト は npm init [email protected] コマンド で作成
  • TypeScript を用いる場合は プロジェクト 作成時に TypeScript を 追加する
  • プロジェクト 設定は tsconfig.json に記載されている
  • TypeScript の Vue3 を VSCode で使う場合は Volar の Takeover モード を用いる

関連記事

Ads
Rambling and Delving