如何将响应对象映射到由Angular 7中的一些其他类型接口组成的类型接口

Question

我有如下界面：

export interface ObjLookup {
    owner?: IObjOwner;
    contacts?: IOwnerContacts[];
    location?: IOwnerLocation;
}

其中包括以下接口：

export interface IObjOwner {
    lastName?: string,
    firstName?: string;
}

export interface IOwnerContacts {
    name?: string;
    address?: string;
    email?: string;
}

export interface IOwnerLocation {
    address?: string;
    city?: string;
    state?: string;
    zip?: number;
    country?: string;
}

现在，我的响应对象看起来像这样：

{
    status: "success",
    is_error: false,
    errors: [],
    data: {
        owner: {
            lastName: "lovejoy",
            firstName: "reverend"
        }, 
        contacts: [
            {
                  name: "homer simpson",
                  address: "3 evergreen terrace, springfield, XX XX823",
                  email: "homer@springfieldnuclearpower.net"
            },
            {
                  name: "ned flanders",
                  address: "5 evergreen terrace, springfield, XX XX823",
                  email: "ned@somechurch.god"
            }
        ],
        location: {
            address: "the church",
            city: "Springfield",
            state: "XX",
            zip: XX823,
            country: "US"
        }
    }
}

请忽略我输入的 json 响应中的任何语法错误。

无论如何，我认为我需要做一些事情，将响应映射到可观察对象、管道和其他东西。到目前为止我所拥有的是：

export class SimpsonsService {
     public resourceUrl = 'www.example.com/api/simpsons';

     constructor ( protected http: HttpClient) {}

    find(name: string): Observable<EntityResponseType> {

        return this.http.get<ObjLookup>(`${this.resourceUrl}/${name}`)
           .pipe(
               map(respObj => {
                   const
               })
           );
        });
    }
}

我已经尝试了多种演绎方式，我需要提取响应对象并创建一些映射到各种接口的单独类型，然后需要将它们包含在更大的响应类型ObjLookup 中。

我需要做什么才能将适当的数据对象捕获为response.data.owner、response.data.contacts、response.data.location 对象的一部分？

Answer 1

你可以试试这个

owner:  IObjOwner;
contacts: IOwnerContacts[];
location: IOwnerLocation;

return this.http.get<ObjLookup>(`${this.resourceUrl}/${name}`)
           .pipe(
               map(respObj => {
                   this.owner= respObj.data.owner
                   this.contacts= respObj.data.contacts
                   this.location= respObj.data.location
                   //do something
               })
           );
        });

Answer 2

简单的类型转换

    <IObjOwner>response.data.owner
    <Array<IOwnerContacts>>response.data.contacts
    <IOwnerLocation>response.data.location

对于data wasnt a property of response，您必须将response 对象的返回类型设为any。或者使用响应对象的所有属性创建一个新接口，并将该接口的类型提供给response 对象。 说吧，

export interface IDataResponse {
    owner?: IObjOwner;
    contacts?: Array<IOwnerContacts>;
    location?: IOwnerLocation
}

export interface IResponse {
    status?: string;
    is_error?: boolean;
    errors?: Array<any>;
    data?: IDataResponse;
}

并用作，

owner:  IObjOwner;
contacts: Array<IOwnerContacts> = [];
location: IOwnerLocation;

return this.http.get<ObjLookup>(`${this.resourceUrl}/${name}`)
           .pipe(
               map((response: IResponse)=> {
                  this.owner =  <IObjOwner>response.data.owner
                  this.contacts =  <Array<IOwnerContacts>>response.data.contacts
                  this.locations = <IOwnerLocation>response.data.location
               })
           );
   });