Typescript: How do I define interfaces for nested objects array

Question

Assume I have a JSON payload that parses into something like this

{
  "status": "123",
  "totalResults": 1234,
  "articles": [
    {
      "source": {
        "id": "123",
        "name": "123"
      },
      "author": "123",
      "title": "123",
      "url": "123",
      "imgUrl": "123",
      "publishedAt": "123",
      "content": "123"
    },
]
}

How would I set up the definition of the Example interface to model that the value of the items property is an object whose keys are strings and whose values are defined by the Item interface:

interface Item {
    status: string;
    totalResults: number;
    id: string
    name: string
    author: string
    title: string
    description: string
    url: string
    urlToImage: string
    publishedAt: string
    content: string
}

interface Example extends Item{
    articles: Array<Object>;
    source: {
     [key: string]: Item
    };
}


const example: Example = {
  "status": "123",
  "totalResults": 1,
  "articles": [
    {
      "source": {
        "id": "123",
        "name": "123"
      },
      "author": "123",
      "title": '123',
      "description": "123",
      "url": "123",
      "urlToImage": "123",
      "publishedAt": "123",
      "content": "123"
    },
  ]
}

pzaenger · Accepted Answer · 2023-01-05 09:00:29Z

2

export interface Reference{
  status:string,
  totalResults: number,
  articles: 
    {
      source: {
        id: string,
        name: string
      },
      author: string,
      title: string,
      url: string,
      imgUrl: string,
      publishedAt: string,
      content: string
    }[]
}

edited Jan 5, 2023 at 9:00

pzaenger

12.1k3 gold badges48 silver badges54 bronze badges

answered Jan 5, 2023 at 8:56

jaya sri

362 bronze badges

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

1 Comment

Mario Boss Over a year ago

I would like to suggest to add to the answer some extra explanation/comment - not code only

Miha · Accepted Answer · 2022-07-01 15:48:34Z

Here is a properly typed version, but I'm not sure if that is what you're looking for.

interface Item {
    status: string;
    totalResults: number;
    articles: Array<Articles>;
}

interface Articles {
    source: Source // or source: { id: string; name: string };
    author: string;
    title: string;
    description: string;
    url: string;
    urlToImage: string;
    publishedAt: string;
    content: string;
}

interface Source {
    id: string;
    name: string;
}

const example: Item = {
    "status": "123",
    "totalResults": 1,
    "articles": [
    {
        "source": {
            "id": "123",
            "name": "123"
        },
        "author": "123",
        "title": '123',
        "description": "123",
        "url": "123",
        "urlToImage": "123",
        "publishedAt": "123",
        "content": "123"
    },
    ]
}

Collectives™ on Stack Overflow

Typescript: How do I define interfaces for nested objects array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related