Volar

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 プロジェクト 作成 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 プロジェクト の実行 プロジェクト が作成できましたので 何はともあれ プロジェクト 作成時に示される手順をつかって 実行してみたいと思います。 なお vue-create で作成した プロジェクト では サーバー が Vite に変更されています。 Vite には 既存の サーバ が抱える 以下の問題を解決できるようで、 個人的にも 従来のものよりぐっと高速になった実感がありました。 起動の遅い サーバ遅い更新 Vue 3 プロジェクト 初期設定確認 それでは 作成された プロジェクト から TypeScript ならではの部分を確認していきます。 まず最初に プロジェクト の ルートディレクトリ に存在する tsconfig.json から見ていきます。 tsconfig.json tsconfig.json は TypeScript プロジェクト のルートディレクトリに配置され、ルートファイル と コンパイラ オプション を指定することができます。 vue-create で作成された初期状態の tsconfig.json は以下のようになっています。 { "extends": "@vue/tsconfig/tsconfig.web.json", "include": , "compilerOptions": { "baseUrl": ".", "paths": { "@/*": } }, "references": [ { "path": "./tsconfig.vite-config.json" } ] } 内容を簡単にみていきます。 項目説明extends大元となる継承元の設定ファイルを指定。今回の例では、指定したファイルからさらに参照されている tsconfig.json に記載されている compilerOptions が有効になります。includeプロジェクトに含める TypeScript ファイル を指定 - ルートディレクトリの env.d.tssrc - ディレクトリ内のサブディレクトリ配下のファイル 例）src/main.tssrc - ディレクトリ内のサブディレクトリ配下のファイル (拡張子 .vue) 例）src/components/HelloWorld.vuecompilerOptionsコンパイラオプションを指定。上述の通り、基本的なオプションはextendsで指定されたファイルに記載があり、ここでは、以下のみを指定 - baseUrl: ベースディレクトリとして tsconfig.json と同じディレクトリを指定 - paths: インポートするファイルの検索パス。referencesアプリケーション自体とは直接関係しないが、プロジェクトの実行に必要な TSConfig ファイル を指定します。この例では、サーバである vite に関連した設定を読み込んでいます。tsconfig.json に記載されている設定 特別な理由がない限り、このままの設定で進めてしまっても問題なさそうです。 Volar セットアップ 本記事の最後に VSCode での開発に便利な プラグイン の セットアップ をしていきます。 Vue2 までは Vetur を使うことも多かったのですが、Vue 創始者 の Evan You が アナウンス したように Vue3 では Volar を使うのが良さそうです。 Volar の インストール Volar は以下の リンク から VSCode にインストール していきます。 https://marketplace.visualstudio.com/items?itemNamejohnsoncodehk.vscode-typescript-vue-plugin ただし 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 が グレーアウト され 無効化されていることを確認します。 まとめ Vue3 プロジェクト は npm init vue@3 コマンド で作成TypeScript を用いる場合は プロジェクト 作成時に TypeScript を 追加するプロジェクト 設定は tsconfig.json に記載されているTypeScript の Vue3 を VSCode で使う場合は Volar の Takeover モード を用いる 関連記事 https://www.harubears.com/ja/tech/vue-js/create-typescript-component-interfaces/ https://www.harubears.com/ja/tech/vue-js/vue-cli-register-to-gitlab/ https://www.harubears.com/ja/tech/vue-js/vue3-bootstrapvue-b-table-selectable-single/ https://www.harubears.com/ja/tech/vue-js/bootstratp-with-vuecli-of-vue3/

Volar

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

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