如何在API响应数据上使用TypeScript类型

Question

所以我调用api并从它返回数据。它包含的数据比我需要的要多，所以我通过响应进行映射，只返回我需要的值。问题是我不明白如何在TS中定义我的响应数据。现在它看起来像这样，但是我知道使用任何是一个坏的选项.

data = data.results.map((item: any) => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})

我应该如何使用TS将响应数据转换为我需要的格式。我认为我需要一些额外的步骤，以便我可以在项目上使用我的接口。

interface PhotoModel {
id: string
src: string
description: string
name: string
favorited: boolean
}

Answer 1

您需要创建一些接口或类型来描述将要处理的数据。例如:

interface ResultItem {
id: string;
urls: {
small: string;
};
alt_description: string;
user: {
name: string;
};
}
interface PhotoModel {
id: string
src: string
description: string
name: string
favorited: boolean
}
data.results.map((item: ResultItem): PhotoModel => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})

然而(特别是如果你不控制你请求的API的形状)，在运行时你可能不会得到你期望得到的。因此，首先验证从API返回的数据是有益的(例如，使用io-ts或类似的工具)。

Answer 2

可以只返回数据。结果为photommodel数组

return data.results as PhotoModel[]

Answer 3

let photos: PhotoModel[] = data.results.map((item: any) => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})

Answer 4

最好的方法是将返回值强制转换为所需的类型。Typescript不会让你使用任何额外的字段!你可以不做任何处理就离开:

const data: PhotoModel[] = data.results;

如果你真的想改变你的数据，因为某些原因，这是不够的，你可以这样做:

data = data.results.map((item: any): PhotoModel => {
return {
id: item.id,
src: item.urls.small,
description: item.alt_description,
name: item.user.name,
favorited: false
}
})

在这里使用any并不坏，因为即使你定义了一个接口，它也没有值。