2.3 型定義ファイル（TypeScript interfaceなど）を教科書スタイルで丁寧に書きます。

2.3 型定義ファイル（TypeScript interfaceなど）

ここでは、変換前に使用されている型定義ファイル（またはコンポーネント内の型情報）の例を示します。

特に今回は、ルート情報（RouteInfo） など、Vuexモジュールとコンポーネント両方で必要となる型に注目します。

■ ファイル構成（例）

src/
├── types/
│   └── store.ts

■ store.ts（型定義ファイル・変換前）

// ファイル名: store.ts

// ルート情報の型定義
export interface RouteInfo {
  name: string;
  path: string;
}

// sampleModuleのState型定義
export interface SampleModuleState {
  text: string;
  currentRoute: RouteInfo;
}

// Getterの型定義
export interface SampleModuleGetters {
  textLength: number;
  currentRouteName: string;
}

// Mutation用の引数型定義
export interface SetTextPayload {
  newText: string;
}

export interface SetCurrentRoutePayload {
  route: RouteInfo;
}

// Action用の引数型定義
export interface UpdateTextPayload {
  newText: string;
}

export interface UpdateRoutePayload {
  route: any; // Routerの情報を渡すが、必要に応じてより厳密に型付け可能
}

■ この型定義ファイルで注目すべきポイント

項目	内容
RouteInfo型	nameとpathを持つルート情報のオブジェクト
State型	textとcurrentRouteを管理する
Getter型	textLengthとcurrentRouteNameを返す想定
Mutation/ActionのPayload型	型安全に引数を受け取るための個別定義

■ なぜ型定義を分けるのか？

コンポーネント側でも、Vuexのstateやgetterの型を補完しやすくするため
MutationやActionの引数の型ミスを防止するため
Composition APIへの移行時にもスムーズに型を流用できるようにするため

✅ この型定義ファイル（store.ts）も、後のComposition APIリファクタリング時に再活用します。

✅ 特に大規模アプリケーションでは、型定義を明示的にしておくことが移行作業を圧倒的に楽にします。