如何在 API 響應數據上使用 TypeScript 類型

Question

所以我打電話給 api 並從它返回數據。 它包含的數據比我需要的多得多，所以我 map 通過我的響應並只返回我需要的值。 問題是我不明白如何在 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
    }

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

您可以將 data.results 作為 PhotoModel 數組返回

return data.results as PhotoModel[]

Answer 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也不錯，因為即使您定義了一個接口，它也沒有任何價值。

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