typescript - cast json to an interface

Question

I have an interface like this:

export default interface IProject extends{
    Id?:number;
    name?:string;
    description?:string;
}

and I when get data from the server the json file includes more properties like this:

{
    id,
    name,
    description,
    url,
    startDate,
    finishDate
}

but I only need the id, name and description fields. I tried this:

response.data.map((p: any) => p as IProject);

but the object includes the unnecessary data like url, startdate and finishDate how can I map them correctly? I know that we can map them like this:

response.data.map((p: any) => {
    return {id:p.id,name:p.name,description:p.description}
});

but is there any other better ways to do that?

Possible duplicate of Auto-skip properties not belonging to the type in TypeScript — Estus Flask
– Estus Flask, Commented May 17, 2018 at 12:22

jcreamer898 · Accepted Answer · 2018-05-17 14:23:39Z

1

I'd recommend doing what you're doing, but additionally adding some types for your server response as well. That way you get some intellisense for your mapping functions.

interface IProject {
  id?: number;
  name?: string;
  description?: string;
}

interface IProjectResponse {
  id?: number;
  name?: string;
  description?: string;
  url?: string;
  startDate?: string;
  finishDate?: string;
}

const mapResponse = (response: IProjectResponse[]) => response.data.map((p) => ({
  id: p.id,
  name:p.name,
  description: p.description,
}));

const response = await fetch(/* .. */);
const data = await response.json();

const projects: IProject[] = mapResponse(data);

answered May 17, 2018 at 14:23

jcreamer898

8,1895 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

typescript - cast json to an interface

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related