angular - 如何将 http 请求响应映射到我在 TypeScript 中定义的对象

Question

我开始了解 Angular、TypeScript 和 RxJS。我有一个返回 JSON 的 http 请求。在这个 JSON 中有我需要构建我定义的对象的数据。比方说，我的对象是这样的:

export class RegularUser {
    constructor(
        public id: number,
        public firstName: string,
        public lastName: string,
        public token: string
    ) {}
}

现在，我向某个 API 发送请求，它以这种格式返回数据:

{
    success: boolean,
    uid: number,
    first_name: string,
    last_name: string,
    cid: number,
    rights: number[]
    token: string
}

我有 HttpClient 服务，所以我想我会这样做:

this.httpClient.get(
    'http://api.example.com/api/get_user'
).pipe(
    tap((receivedData: Response) => console.log(receivedData)),
    map((receivedData: Response) => {
        return new RegularUser(
            receivedData.uid, 
            receivedData.first_name, 
            receivedData.last_name, 
            receivedData.token);
    })
);

但对于 TypeScript，receivedData 对象没有上面列出的参数。我是否必须为 API 响应创建一个接口(interface)，然后将其映射到我的 RegularUser 对象？

Answer 1

您可以指定 type对于get()这样的一个接口(interface)。为什么在您的情况下可能需要一个中间/附加接口(interface)来分离关注点，因为具有类型的get() 不会新建一个RegularUser 类的实例。可以使用您期望从服务器响应中获得的属性创建一个中间/附加接口(interface)，这些属性将用于创建您的最终类的实例:

interface Foo {
  uid: number,
  first_name: string,
  last_name: string,
  token: string
}

this.httpClient.get<Foo>(
    'http://api.example.com/api/get_user'
).pipe(
    tap((receivedData: Foo) => console.log(receivedData)),
    map((receivedData: Foo) => {
        return new RegularUser(
            receivedData.uid, 
            receivedData.first_name, 
            receivedData.last_name, 
            receivedData.token);
    })
);

如果您不需要新建 RegularUser 类的实际实例，将其作为接口(interface)或具有属性的类可能就足够了:

this.httpClient.get<RegularUser>(
    'http://api.example.com/api/get_user'
).pipe(
    tap((receivedData: RegularUser) => console.log(receivedData))
);

希望对您有所帮助!