簡単に作ったweather.tsukumijima.netさんのapiレスポンスへのts型定義

さんのapiのレスポンスの型定義を、サイトを参考にぱっと作成しました。
ご自由に参考にしてください。

weatherTsukumijima.ts

/**
 * 各日の天気予報詳細を表すインターフェース。
 */
interface WeatherForecast_forecasts {
  /**
   * 予報日（ISO8601形式）。
   * 例: "2024-07-14"
   */
  date: string;
  /**
   * 予報日のラベル。
   * 例: "今日", "明日", "明後日"
   */
  dateLabel: string;
  /**
   * 天気の概況。
   * 例: "晴れ", "曇り", "雨"
   */
  telop: string;
  /**
   * 詳細な天気情報。
   */
  detail: {
    /**
     * 天気。
     */
    weather: string;
    /**
     * 風の強さ。
     */
    wind: string;
    /**
     * 波の高さ（沿岸部のみ）。
     */
    wave: string;
  };
  /**
   * 気温情報。
   */
  temperature: {
    /**
     * 最低気温。
     */
    min: {
      /**
       * 摂氏での最低気温。
       */
      celsius: string;
      /**
       * 華氏での最低気温。
       */
      fahrenheit: string;
    };
    /**
     * 最高気温。
     */
    max: {
      /**
       * 摂氏での最高気温。
       */
      celsius: string;
      /**
       * 華氏での最高気温。
       */
      fahrenheit: string;
    };
  };
  /**
   * 降水確率。
   */
  chanceOfRain: {
    /**
     * 00時から06時の降水確率。
     */
    "00-06": string;
    /**
     * 06時から12時の降水確率。
     */
    "06-12": string;
    /**
     * 12時から18時の降水確率。
     */
    "12-18": string;
    /**
     * 18時から24時の降水確率。
     */
    "18-24": string;
  };
  /**
   * 天気アイコン情報。
   */
  image: {
    /**
     * アイコンのタイトル。
     */
    title: string;
    /**
     * アイコン画像（SVG）のURL。
     */
    url: string;
    /**
     * アイコン画像の幅。
     */
    width: number;
    /**
     * アイコン画像の高さ。
     */
    height: number;
  };
}

/**
 * 気象予報APIの全体レスポンスを表すインターフェース。
 */
interface WeatherForecast {
  /**
   * 予報発表時刻（ISO8601形式）。
   */
  publicTime: string;
  /**
   * 予報発表時刻（整形済み）。
   */
  publicTimeFormatted: string;
  /**
   * 予報発表機関。
   * 例: "福岡管区気象台"
   */
  publishingOffice: string;
  /**
   * 予報のタイトル。
   * 例: "福岡県久留米市の天気"
   */
  title: string;
  /**
   * 気象庁の該当予報ページへのリンク。
   */
  link: string;
  /**
   * 天気概況文の詳細。
   */
  description: {
    /**
     * 天気概況発表時刻（ISO8601形式）。
     */
    publicTime: string;
    /**
     * 天気概況発表時刻（整形済み）。
     */
    publicTimeFormatted: string;
    /**
     * 見出しのみのテキスト。
     */
    headlineText: string;
    /**
     * 本文のみのテキスト。
     */
    bodyText: string;
    /**
     * 見出しと本文を含む全体のテキスト。
     */
    text: string;
  };
  /**
   * 都道府県ごとの日別予報の配列。
   * 通常、今日・明日・明後日の3日間の予報が含まれます。
   */
  forecasts: [
    WeatherForecast_forecasts,
    WeatherForecast_forecasts,
    WeatherForecast_forecasts,
  ];
  /**
   * 予報対象地域の情報。
   */
  location: {
    /**
     * 地域名。
     */
    area: string;
    /**
     * 都道府県名。
     */
    prefecture: string;
    /**
     * 一次細分区域名。
     */
    district: string;
    /**
     * 地方気象台/観測所名。
     */
    city: string;
  };
  /**
   * APIの著作権情報。
   */
  copyright: {
    /**
     * 著作権表示のタイトル。
     */
    title: string;
    /**
     * 著作権元のリンク。
     */
    link: string;
    /**
     * 著作権元の画像情報。
     */
    image: {
      /**
       * 画像のタイトル。
       */
      title: string;
      /**
       * 画像のリンク。
       */
      link: string;
      /**
       * 画像のURL。
       */
      url: string;
      /**
       * 画像の幅。
       */
      width: number;
      /**
       * 画像の高さ。
       */
      height: number;
    };
    /**
     * データ提供元に関する詳細。
     */
    provider: Array<{
      /**
       * 提供元のリンク。
       */
      link: string;
      /**
       * 提供元の名称。
       */
      name: string;
      /**
       * 提供元に関する注意書き。
       */
      note: string;
    }>;
  };
}

実装例

export async function getCityWeather(cityCode: string): Promise<WeatherTsukumijimaRes> {
  const res = await fetch(`https://weather.tsukumijima.net/api/forecast/city/${cityCode}`);
  // console.log(res)
  if (!res.ok) throw new Error("Failed to fetch weather data");
  const data = await res.json();
  return data;
}

console.log(`明日の天気:${weather.forecasts[1].telop}`)//明日の天気:雨時々止む