30、开发天气应用：从基础到数据获取

开发天气应用：从基础到数据获取

在当今数字化时代，天气应用是人们日常生活中常用的工具之一。本文将详细介绍如何使用 React 和 TypeScript 开发一个简单的天气应用，让你能够获取全球多个城市的实时天气信息。

1. 数据来源与应用初始化

我们将从 http://openweathermap.org 获取真实的天气数据，该服务提供了一个 API，可以对全球许多城市进行天气请求。它返回的天气信息是 JSON 格式的字符串。例如，要获取伦敦的当前华氏温度，URL 如下：

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

需要注意的是，你需要在该网站申请一个 APPID，申请过程很简单。申请完成后，将上述 URL 中的 12345 替换为你收到的 APPID。

首先，使用以下命令初始化天气应用：

create-react-app weather --typescript

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