PageコンポーネントとAPIでデータ型を共有する

Nuxt3でAPIからデータを取得するのは、とりあえずuseFetchを使っておけば良いようです。まずはDBからログインユーザー情報を取得するAPIを作成してみました。 大きな問題はなくデータを取得できました。しかし、userの型はUnknownになるようです。これに型をつけるべきなのかどうか？はよくわかっていません。 C#のMVCに慣れているとなんとなく型をつけたくなるという、そんな理由で試してみました。

interface User {
    email: string,
    name: string,
    roles: string[]
}
const { data: user } = await useFetch<User>("/api/user/" + userId.value)

interfaceで型を定義して、useFetchでそれを指定できました。 さて、このinterfaceはどこで定義すればよいのでしょう？ できれば、API側で応答を作成するときにも使えると助かります。

試しに、/utils/models.ts を作成して、interface定義を移動してみました。 /utilsディレクトリはauto-importの対象になっていて、.vueファイルではimportをしなくてもそのまま参照することができました。 そしてなんと、/server/api/の下のハンドラでもimportしないで参照することができます。

      const user: User = {
        name: item.name,
        email: item.userDetails,
        roles: item.userRoles
      };
      return user

試しに、/utilsに関数を作成してapiから使ってみましたが、流石にこれは実行時にエラーが発生しました。 型参照だけであれば問題はないようです。考えてみれば、型指定はテキストエディタ上の作業のためだけなような気もします。必須ではないかもしれないです。