在Typescript中格式化JSON响应API调用

Question

我是Typescript新手，想使用Firebase函数构建一个简单的天气应用程序。首先，我想调用一个API来简单地检索城市的当前温度。

这是来自API调用的JSON响应:

{
"latitude": 40.710335,
"longitude": -73.99307,
"generationtime_ms": 0.3579854965209961,
"utc_offset_seconds": 0,
"timezone": "GMT",
"timezone_abbreviation": "GMT",
"elevation": 27.0,
"current_weather": {
"temperature": 12.3,
"windspeed": 14.0,
"winddirection": 181.0,
"weathercode": 3,
"time": "2023-01-13T09:00"
},
"hourly_units": {
"time": "iso8601",
"temperature_2m": "°C"
},

我想在进行此API调用时简单地从当前天气检索温度，这是我当前的代码:

export const getWeather = functions.https.onRequest(async (request, response) => {
const dataResponse = await fetch("https://api.open-meteo.com/v1/forecast?latitude=40.71&longitude=-74.01&hourly=temperature_2m&current_weather=true");
const data = await dataResponse.json();
console.log(data);
response.send(data);
});

我如何能够从JSON响应中只获得一个值(温度)?

Answer 1

欢迎使用Stack Overflow!

所以看起来你想要访问从API调用返回的JSON对象的值。在JavaScript中，你可以这样做:

myObj.<nested_item1>

在你的例子中，你想要

// should be 12.3 based off your response
const temperature = data.current_weather.temperature 

希望这对你有帮助!

编辑:打印稿

在TypeScript中，如果你没有显式地指定数据的结构，TS会尝试自动推断数据。在你的例子中，你正在做一个fetch调用，这意味着TS没有上下文的输出是什么。

想象一下，从TS的角度来看，你点击的url可以包含一个API调用，一个网站，或者任何东西。

要解决这个问题，您有两个选项:

1. 为线路禁用TS(不推荐)

// @ts-ignore
const temperature = data.current_weather.temperature 

2. 定义获取响应的类型

type WeatherData = {
latitude: number
longitude: number
generationtime_ms: number
utc_offset_seconds: number
timezone: string
timezone_abbreviation: string
elevation: number
current_weather: {
temperature: number
windspeed: number
winddirection: number
weathercode: number
time: string
}
hourly_units: {
time: string
temperature_2m: string
}
}
...
const data = await dataResponse.json() as WeatherData
...