如何从响应中获取数据并对其进行类型转换

小编典典

如何从响应中获取数据并对其进行类型转换

javascript

我在本地环境中调用 API，并收到以下响应。

{
    "data": {
        "dailyStreakResponses": [
            {
                "date": 1658514600000,
                "activity": 0,
                "streak": null,
                "videos": [],
                "feedback": [],
                "awards": [
                    {
                        "award": {
                            "id": 1,
                            "awardName": "Course1 Award",
                            "createdAt": 1658565639670,
                            "category": "AWARD"
                        },
                        "awardTime": 1658565639670
                    },
                    {
                        "award": {
                            "id": 2,
                            "awardName": "Course1 Certificate",
                            "createdAt": 1658565651055,
                            "category": "CERTIFICATE"
                        },
                        "awardTime": 1658565639670
                    }
                ]
            }
        ]
    },
    "status": 200,
    "statusText": "",
    "headers": {...},
    "config": {...},
    "request": {},
    "error": false
}

从这个响应中，我只需要数据部分。所以我创建了以下界面

export interface StudentDailyStreakResponse {
  data : {
    dailyStreakResponses: [{
      date : number
      activity : number
      streak : number
      videos : [{
        id: number
        activityName: string
      }]
      feedback : [{
        commentId: number
        comment: string
      }]
      awards : [{
        award: {
          id: number
          awardName: string
        }
      }]
    }]
  }
}

即使在对 StudentDailyStreakResponse 的响应进行类型转换之后，我也会在响应中得到很多字段。我怎样才能得到数据部分？

阅读 109

2022-07-26

共1个答案

小编典典

JavaScript 中没有类型转换。TypeScript 确实支持类型断言，但这仅适用于编译时间。你可以像这样使用它：

const foo = res as StudentDailyStreakResponse;

但是，为了您的目的，您可以使用类，如下所示：

export interface IStudentDailyStreakResponse {
  data: {
    dailyStreakResponses: [{
      date: number
      activity: number
      streak: number
      videos: [{
        id: number
        activityName: string
      }]
      feedback: [{
        commentId: number
        comment: string
      }]
      awards: [{
        award: {
          id: number
          awardName: string
        }
      }]
    }]
  }
}

export class StudentDailyStreakResponse implements IStudentDailyStreakResponse {
  data: {
    dailyStreakResponses: [{
      date: number
      activity: number
      streak: number
      videos: [{
        id: number
        activityName: string
      }]
      feedback: [{
        commentId: number
        comment: string
      }]
      awards: [{
        award: {
          id: number
          awardName: string
        }
      }]
    }]
  }
  constructor(res: any) {
    this.data = {
      dailyStreakResponses: res.data?.dailyStreakResponses.map((d: any) => ({
        date: Number(d.date),
        activity: Number(d.activity),
        streak: Number(d.streak),
        videos: d.videos.map((v: any) => ({
          id: Number(v.id),
          activityName: String(v.activityName)
        })),
        feedback: d.feedback.map((f: any) => ({
          commentId: Number(f.commentId),
          comment: String(f.comment)
        })),
        awards: d.awards.map((a: any) => ({
          award: {
            id: Number(a.award.id),
            awardName: String(a.award.awardName)
          }
        }))
      }))
    }
  }
}

2022-07-26