如何将响应对象映射到 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: "[e-mail]"
            },
            {
                  name: "ned flanders",
                  address: "5 evergreen terrace, springfield, XX XX823",
                  email: "[e-mail]"
            }
        ],
        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
               })
           );
   });