如何将http请求响应映射到TypeScript中定义的对象
我开始了解角，TypeScript和RxJS。我有一个返回JSON的http请求。在这个JSON中，我需要一些数据来构造我定义的对象。比如说，我的目标是：
export class RegularUser {
constructor(
public id: number,
public firstName: string,
public lastName: string,
public token: string
) {}
}现在，我向某个API发送一个请求，该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响应创建一个接口，然后将其映射到我的RegularUser对象？
回答 4
Stack Overflow用户
发布于 2018-08-23 17:06:25
您可以为get() (例如接口)指定一个get()。为什么在中可能需要一个中间/附加接口来分离关注点--您的场景是，具有类型的get()将而不是新出现类RegularUser的一个实例。可以使用您期望从服务器响应中获得的属性创建中介/附加接口，这些属性将用于创建end类的实例：
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的实际实例，那么仅仅将它作为一个具有属性的接口或类就足够了：
this.httpClient.get<RegularUser>(
'http://api.example.com/api/get_user'
).pipe(
tap((receivedData: RegularUser) => console.log(receivedData))
);希望这能帮上忙！
Stack Overflow用户
发布于 2018-08-23 17:06:34
而不是构造函数，而是使用接口，这是一个更好的选择。因此，IDE可以使用语言服务启用代码自动完成，并且可以避免错误的属性命名。
export interface RegularUser {
success: boolean;
uid: number;
first_name: string;
last_name: string;
cid: number;
rights: number[];
token: string;
}在役：
this.httpClient.get<RegularUser>(
'http://api.example.com/api/get_user'
).pipe(
tap((receivedData: RegularUser) => console.log(receivedData))
);Stack Overflow用户
发布于 2018-08-23 17:08:04
您可以使用以下方法创建自己的Response接口：
export interface MyResponse {
success: boolean,
uid: number,
first_name: string,
last_name: string,
cid: number,
rights: number[]
token: string
}然后将其导入到服务中：
import { MyResponse } from '../some/path/filename.ts'; 但是，您也可以将其包含在服务本身中，因此可以跳过'export'。
您可以像使用当前的Response接口一样使用它：
(receivedData: MyResponse)注意:你可以给它任何你想要的名字(使用TitleCase来保持一致性)。您也可以使用角已经使用的名称，这将被覆盖，但这是不推荐的。见评论。
您可能必须使一些属性是可选的(?:)，否则您可能会得到一条红线，表示“一些属性丢失了”，如果不是全部使用的话：
...
success?: boolean,
...或者，您可以通过输入any来删除警告，但不建议这样做：
(receivedData: any)https://stackoverflow.com/questions/51990839
复制相似问题
腾讯云开发者
