Nuxt3で$fetchのレスポンスに型をつけるには

Nuxt3だとaxiosではなく$fetchやuseFetchの利用が推奨されているみたいです。
その使い方の備忘録として。
2022/06/28時点での情報です。もっといい方法あるよって方はコメントまで！

作るもの

あらかじめ郵便番号を指定してその都道府県を返すだけのもの。

ディレクトリ構造

必要なものだけピックアップしてます。

.
├── app.vue
├── interface
│   └── address.ts
└── server
    └── api
        └── getAddress.ts

interface

zipcloudにレスポンスフィールドが記載されてるのでその通りのinterfaceを用意します。

interface/address.ts

export interface Address {
  message: string,
  results: AddressDetail[],
  status: number
}
export interface AddressDetail {
  address1: string,
  address2: string,
  address3: string,
  kana1: string,
  kana2: string,
  kana3: string,
  prefcode: string,
  zipcode: string
}

server

serverの詳しい説明は公式ドキュメントにて

server/api/getAddress.ts

import { Address } from "~~/interface/address"

export default defineEventHandler(async(event) => {
  const response = await $fetch<string>('/api/search',{
    baseURL: "https://zipcloud.ibsnet.co.jp",
    params: {zipcode:1000000}
  })
  const result = JSON.parse(response) as Address

  return {result}
})

レスポンスの型にAddressを指定するとVSCode上ではAddressで取得出来てそうなんですが、実行後に型を確認するとstringになってしまい苦戦。
解決策としてここでは$fetchのレスポンスをstringで受け取って、JSON.parseでキャストしてます。

page

ページ側は表示させるだけです。

app.vue

<template>
  <div>
    <p>{{api.result.results[0].address1}}</p>
  </div>
</template>

<script setup lang="ts">
const {data:api} = await useFetch('/api/getAddress')
</script>

実行

ちゃんと型がついた状態で取れてますね。