Vue３×TypeScript 基本の型定義【compositionAPI】

この記事で分かること
型定義とは何か
型定義をするメリット
型定義の仕方と具体的な実装例
Vueコンポーネントで利用するときの具体的な実装例
1. 実装の手順
まとめ

この記事で分かること

・型定義する意義
「なんでそんなことする必要があるの？？」を解決します！

・型定義の仕方
具体的な実装例を踏まえ、シンプルにまとめています。

・Vueコンポーネントでの使い方
ここが一番悩むと思います！具体的な実装で理解を深めると思います。

型定義とは何か

型定義とは、変数、関数、オブジェクトなどの要素に対して、それが持つべき型（データの形式や構造）を定義することです。

TypeScriptではこれによりコードの予測可能性が向上し、開発者が意図せぬ型の使用や不正確なデータの扱いを防ぐことができます。

型定義をするメリット

型定義を何でする必要があるのか初めは感じられないのも無理はないです。

だってそもそもTypeScriptの生みの親であるJavascriptは型定義を無視して書くことができました。

しかし、これは近年フロントエンドの持つべき役割や機能が多くなったからだと思います。

その分アプリケーションが複雑化したり、巨大化したりするため、このニーズを踏まえた言語が生まれたと考えられます。

具体的には以下のようなメリットがあります。

①型安全性向上
コード内での型エラーを事前に検知し、実行時の不正な型の使用を防ぎます。

②コードの理解性向上
他の開発者や自分自身が後でコードを読む際に、型定義によりコードの意図が明確になります。

③ドキュメンテーション
型定義はコードの一部として機能し、コードのドキュメンテーションとしても役立ちます。
型を調べるときに、型定義があることでどの型を用いるのかが情報として理解することができます。
そのため開発者は迷うことなく変数などを定義することができます。

型定義の仕方と具体的な実装例

// 数字型の変数
type MyNumber = number;

// ユーザーオブジェクトの型
type User = {
  id: number;
  name: string;
  email: string;
};

// 関数の型
type MyFunction = (x: number, y: number) => number;

// 列挙型
enum UserRole {
  Admin,
  User,
  Guest,
}

// インターフェース
interface Post {
  id: number;
  title: string;
  content: string;
}

上記は簡単なtypeScriptの型定義の例です。

変数、オブジェクト、関数、列挙型、インターフェースなど、さまざまなものに型を付けることができます。

定義の先頭には「type」もしくはプリミティブな型（intやStringなどの基本的なデータ型のこと）を書くことによって定義を書いていきます。

Vueコンポーネントで利用するときの具体的な実装例

<template>
  <div>
    <h2>User Information</h2>
    <p>ID: {{ user.id }}</p>
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>

    <h2>Calculate Sum</h2>
    <p>Sum: {{ sum }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';
import { User, MyFunction, UserRole } from './types';

const props = defineProps(['user', 'calculateSum']);

// プロパティとして受け取った user オブジェクトの型チェック
const receivedUser: User = props.user;

// calculateSum 関数の型チェック
const calculateSum: MyFunction = props.calculateSum;
const sum: number = calculateSum(5, 3);
</script>

実装の手順

①ファイルのインポート

import { User, MyFunction } from './types'; を使用して types.ts で定義した型を他のファイルから利用します。

②defineProps を使用する

defineProps はVue 3のComposition APIで提供されるヘルパーメソッドの一つです。
コンポーネントのプロパティをより簡潔に型安全に受け取ります。

この例では、defineProps を使ってuserとcalculateSum のプロパティを型安全に取得しています。
defineProps は、文字列の配列を引数に受け取り、それに基づいて props オブジェクトを生成します。

③変数に型を付ける

receivedUser と sum の変数に型を付けて、型の一貫性を保ちます。

例えば、「const receivedUser: User 」は、変数 receivedUser が型 User であることを示しています。この行は、Vue 3のComposition API内で、他のコンポーネントから受け取った user プロパティを型安全に利用するための宣言です。

具体的には、receivedUser という変数が User 型のオブジェクトであることを TypeScript に教えています。これにより、props.user が User 型として扱われ、それに関連するプロパティやメソッドが利用可能になります。

これにより、Composition APIと型定義を組み合わせて、Vue 3アプリケーションで型安全なコンポーネントを構築できます。