30、开发天气应用：使用 React 和 TypeScript

开发天气应用：使用 React 和 TypeScript

1. 项目概述

我们将开发一个天气应用，从 OpenWeatherMap 获取真实的天气数据。该服务提供了一个 API，可用于查询全球许多城市的天气信息，并以 JSON 格式的字符串返回。例如，要获取伦敦当前的华氏温度，URL 如下：

http://api.openweathermap.org/data/2.5/find?q=London&units=imperial&appid=12345

需要注意的是，使用该服务需要申请一个应用 ID（APPID），申请过程很简单。若要运行此天气应用，需申请 APPID 并将上述 URL 中的 12345 替换为你获得的 APPID。

1.1 创建项目

首先，使用以下命令创建一个基于 TypeScript 的 React 项目：

create-react-app weather --typescript

然后，将 app.tsx 文件中的 JSX 代码替换为一个简单的 HTML 表单，用户可以在其中输入城市名称并点击“Get Weather”按钮。输入的城市名称将作为组件的状态，当用户输入城市名称时， App 组件会更新其状态。