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

【问题标题】：How to use TypeScript types on API response data如何在 API 响应数据上使用 TypeScript 类型
【发布时间】：2021-01-20 18:14:21
【问题描述】：

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

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
    }

【问题讨论】：

未经验证就使用外部输入是一种不好的做法。检查 ajv，它支持 typescript。

标签： javascript reactjs typescript

【解决方案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 之类的工具或类似工具）。

【讨论】：

【解决方案2】：

您可以将 data.results 作为 PhotoModel 数组返回

return data.results as PhotoModel[]

【讨论】：

【解决方案3】：

最好的方法是将 return 转换为您想要的类型。 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也不错，即使你定义了一个接口，它也没有任何价值。

【讨论】：

【解决方案4】：

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
                        }
                    })

【讨论】：