Vue3でtypescriptを使う方法【compositionAPI】

今回はVue3でTypeScriptを用いて開発したいときの方法をご紹介します。

型付言語として知られているTypeScriptですが、開発のメリットも多いため導入したいと考えているエンジニアも多いと思います。

そんな方に向けて簡単な開発方法をご紹介します。

そもそもTypeScriptとは？
どういう場面で使うか
Vue3でtypescriptを使うことのメリット
Vue3でtypescriptを使うポイント
実際のコードの例
結論

そもそもTypeScriptとは？

TypeScriptはJavaScriptに型を追加した言語で、開発者によるバグの早期発見やコードの理解を助けます。

変数や関数に型を指定し、コンパイラが型エラーを検知できるため、大規模なアプリケーション開発やチームプロジェクトに向いていると言われています。

分かりやすさが特徴としてあるため、開発初心者にとっても取り組みやすいかなと思います。

どういう場面で使うか

TypeScriptをVueコンポーネントにimportする場面は、主に以下のようなケースが考えられます：

①大規模なアプリケーション開発

TypeScriptは型安全性を提供するため、コードの予測可能性を高めます。
これは大規模なアプリケーションでの開発において特に重要な視点です。
型エラーを事前に検知でき、バグの発生を減少させることができます。

語句説明

予測可能性：プログラムが実行される際にどれだけ予測しやすく、理解しやすいかという概念のこと。具体的には、プログラムの挙動やエラーの発生が予測しやすいことを指します。

②チーム開発

チームでの協力やコードのメンテナンスを考慮すると、TypeScriptの導入は非常に有益です。

型情報をもとにしたコードの理解が容易で、コードベースの一貫性が保たれます。

エンジニアには個人個人の細かい癖みたいなものがあるので、言語的に統一してくれると少し考える時間が減ります。

③再利用可能なコンポーネントの作成

TypeScriptを利用することで、再利用可能で型安全なコンポーネントを簡単に作成できます。
他の開発者がこれらのコンポーネントを使用する際に型エラーのリスクが低減します。

④IDEのサポート

TypeScriptを使用すると、豊富な型情報が利用可能になります。これにより、IDE（Integrated Development Environment）が強力な補完やリファクタリングのサポートを提供し、開発者の生産性を向上させます。

⑤バグの早期発見

TypeScriptは静的型付け言語であり、コンパイル時に型エラーを検出できます。
これにより、実行前にバグを発見しやすくなります。ランタイムエラーのリスクが低減します。

つまり、TypeScriptはVue.jsアプリケーションの開発において、特に大規模かつ複雑なプロジェクトやチームでの共同作業、再利用可能なコンポーネントの作成などの場面で有効だと言えます。

個人開発においても、分かりやすく書けるという点でTypeScriptはおすすめです。

Vue3でtypescriptを使うことのメリット

TypeScriptをVueコンポーネントにimportすることで、以下のメリットがあります。

①バグの減少
コードの型安全性が向上し、実行時エラー（ランタイムエラーとも言います）を減らすことができる。

②開発のしやすさ
IDEが型情報を理解し、補完やドキュメンテーションのサポートが強化される。

③アプリケーションの保守性の向上

Vue3でtypescriptを使うポイント

Vue 3以降では、scriptセクションで<script setup>を使用することで、冗長なコードを減らしつつTypeScriptを導入することができます。

refやreactiveなどVue 3のリアクティブな機能を適切に利用することで、型安全な状態管理が容易になります。

実際のコードの例

以下は、Vue 3とTypeScriptを組み合わせたシンプルなコンポーネントの例です。
compositionAPIで書いてます。
この例では、カウンターの値を増減する機能を持ったコンポーネントを作成してます。

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

const count = ref<number>(0);

const increment = () => {
  count.value += 1;
};

const decrement = () => {
  count.value -= 1;
};
</script>

<template>
  <div>
    <h1>Counter: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

このコンポーネントでは、<script setup>を使ってシンプルに記述しています。
以下がポイントです。

①　const count = ref(0);

const count = ref(0); で count という変数をリアクティブに宣言しています。
これにより、count の変更が自動的にUIに反映されます。

②　const increment と const decrement

const increment と const decrement でボタンがクリックされたときの挙動を定義しています。

③　@click="increment" および @click="decrement"

@click="increment" および @click="decrement" でそれぞれのボタンがクリックされたときに対応するメソッドが呼び出されます。