簡単な例で始めるVue3でTypeScript入門

libe-irevo@master 2023年11月7日

環境構築(Vite ベース)

Vue.js プロジェクトを作成するために npm init vue@latest コマンドを実行します。npm init vue@latest を実行すると裏側では create-vue が実行されます。

 % npm init vue@latest

create-vue ではプロジェクト名とプロジェクトに追加する機能を聞かれるので必要な機能を選択してください。TypeScript を利用する場合は TypeScript の選択で”Yes”を選択してください。プロジェクト名は任意の名前をつけることができるので好きな名前をつけてください。

% npm init vue@latest
 Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
√ Project name: ... vue-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

プロジェクトの作成が完了したらプロジェクト名で設定した名前でフォルダが作成されるので移動して npm install コマンドを実行してください。

 % cd vue-typescript
 % npm install

Vue の起動

npm install コマンドにより JavaScript 関連のライブラリのインストールが行われるのでインストールが完了したら npm run dev コマンドを実行して開発サーバは起動します。

 % npm run dev
//略
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 608ms

開発サーバが起動したらブラウザから http://localhost:3000/にアクセスすると下記の初期画面が表示されます。Vue プロジェクトで TypeScript を利用できる環境の構築は完了です。

環境構築(Vue-CLI)

Vue CLI を利用した場合の環境構築について説明を行っています。

Vue3 のインストール

Vue CLI コマンド(バージョン 5)を利用してい Vue3 のインストールを行います。インストール中に TypeScript を選択することで TypeScript を利用することができます。

プロジェクトの名前は任意の名前をつけてください。
ここでは vue_typescript という名前をつけています。

 % vue create vue_typescript

Vue CLI がインストールされていない場合はインストールを行ってください。またバージョンが古い場合は最新バージョンにアップデートを行ってください。本文書では、Vue CLI v4.5.11 を利用しています。

インストールを開始すると preset の選択画面が表示されるので、“Manually select features”を選択してください。

Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

機能の選択画面が表示されるのここで TypeScript を忘れずに選択してください。TypeScript まで移動して、Space キーを押して選択してください。

? Check the features needed for your project:
 ◉ Babel
❯◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

次に Vue のバージョンの選択画面が表示されるので、3.x(Preview)を選択してください。

? Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
❯ 3.x
  2.x

以下オプション選択を行っていきますがすべてデフォルトの設定を選択していきます。Enter ボタンを押すとデフォルトが選択されます。

class-style component syntax の選択を聞かれるので”N”(No)を選択してください。Yes か No を選択することによる違いについては後ほど”class-style component の選択”で説明を行っています。

? Use class-style component syntax? (y/N)

Babel alongside TypeScript を使うか聞かれるので”Y”(Yes)を選択します。No を選択した場合はインストール後に babel.config.js ファイルがプロジェクトディレクトリに作成されません。

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

デフォルトのまま Enter ボタンをクリックします。

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

ここでもデフォルトのまま Enter ボタンをクリックします。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

ここでもデフォルトのまま Enter ボタンをクリックします。
In package.json を選択した場合は eslint の.eslintrc.js ファイルの内容が package.json ファイルの中に記述されます。

? Where do you prefer placing config for Babel, ESLint, etc.?
❯  In dedicated config files
   In package.json

preset を保存するかどうか聞かれるので N を設定します。

? Save this as a preset for future projects? (y/N) N

ここまでの設定は以下の通りです。最後もそのまま Enter ボタンをクリックするとインストールが開始されます。

Vue CLI v4.5.11
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Lin
ter
? Choose a version of Vue.js that you want to start the project with 3.x (Previe
w)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) No

class-style component の選択による違い

class-style component syntax を Yes にした場合は、下記のように App.vue ファイルの中で vue-class-components を import して利用しており、App コンポーネントが class ベースコンポーネントとして作成されています。

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

デフォルトの No にした場合は defineComponent を import しています。export default の中身が defineComponent 関数で Wrap されていることがわかります。TypeScript を利用する場合は defineComponent 関数での Wrap が必須となります。

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

さらに比較として TypeScript をインストールしていない場合も確認しておきましょう。App.vue ファイルの中身は下記の通りです。HelloWorld のみ import を行い、script タグの lang=“ts”が設定されていないという違いがあります。

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

vue の起動

インストールが完了したらインストールディレクトリに移動して下記のコマンドを実行してください。

 % cd vue_typescript
 % npm run serve
//略
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.2.138:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ブラウザで http://localhost:8080/にアクセスすると Vue.js + TypeScript の文字が表示されていたら TypeScript のインストールは完了しています。

shims-vue.d.ts ファイル

インストールディレクトリを見ると shims-vue.d.ts ファイルというものがあります。shims-vue.d.ts ファイルは IDE やエディターに拡張子.vue ファイルが何のファイルかというのを理解させるために利用するファイルです。

Visual Studio Code を利用している場合に shims-vue.d.ts ファイルが存在しな場合は下記のようにエラーメッセージが表示されます。デフォルトで作成されるので誤って削除しないように注意してください。

“Cannot find module ‘./App.vue’ or its corresponding type declarations. ts(2307)”

tsconfig.json ファイル

TypeScript をこれまで一度の使ったことがない人にとってはインストールフォルダに tsconfig.json と名前の見慣れないファイルも作成されています。このファイルで TypeScript に関する設定を行うことができます。tsconfig.json ファイルも TypeScript を利用する上で必須なファイルです。

動作確認の準備コードの整理

動作確認のコードをわかりやすくするために App.vue ファイルと HelloWorld.vue ファイルのコードを更新します。HelloWorld のコンポーネントの props msg, img タグ, stley タグを削除しています。

<template>
  <HelloWorld />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});
</script>

HelloWorld コンポーネントでは msg は props ではなく data プロパティとして定義します。

どちらのファイルにも script タグの lang 属性と defineComponent 関数でコンポーネントを囲んでいること以外に通常の JavaScript とのコードとの違いはなく型に関する設定は見当たりません。lang 属性は必須で設定値の ts は typescript を表しています。

data プロパティの msg は文字列なので型は string ですが、設定を行わなくても型推論により自動に型が string に設定されています。型推論は TypeScript が自動で行います。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  data(){
    return {
      msg:'Hello TypeScript',
    }},
});
</script>

型推論による型を確認したい場合は msg プロパティにカーソルを合わせるとエディターの機能により msg の型が string になっていることが確認できます。