How get dynamic JSON generic type with TypeScript

Question

I want to get JSON type of data from backend, but the type of JSON must be generic. It has a generic number of values and generic keys, how can I correctly write the get method? For the moment I write this:

getArticoliByDesc = (descrizione : string) => {
    return this.httpClient.get<{
      this.nomeChiave:
    }[]>(`http://${this.server}:${this.port}/api/articoli/cerca/descrizione/${descrizione}`) //ALT + 0096 | ALT GR + '
  }

I don't know what I must write in <> brackets.

Okay, but if I wanted to return a json type but that has the number of variable keys, what should I write inside the angle brackets ? — Denis, Sep 12 '22 at 14:46
This is just an exercise. The request would be to indicate what needs to be written inside the angle brackets to obtain the possibility of receiving a variable json format, without a precise model. for example: { "key": value } they can be of variable number: { key1: value1 ... keyN: valueN } — Denis, Sep 12 '22 at 14:58

Kelum Bandara · Accepted Answer · 2022-09-12T15:03:13.440

You can add the type as JSON. there is a type in typescript for that.

sample code

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-array-json-dates',
  templateUrl: './array-json-dates.component.html',
  styleUrls: ['./array-json-dates.component.scss']
})
export class ArrayJsonDatesComponent implements OnInit {
  jsonObject: JSON;

  arrayObj: any = [
    {
      id: 1,
      name: "john",
      lastModified: '2011-01-01 02:00:00'
    },
    {
      id: 2,
      name: "Franc",
      lastModified: '2001-01-01 02:00:00'
    },
    {
      id: 3,
      name: "Andrew",
      lastModified: '2021-01-01 02:00:00'
    },
    {
      id: 11,
      name: "Mark",
      lastModified: '2020-01-01 02:00:00'
    },
    {
      id: 12,
      name: "Eric",
      lastModified: '2020-02-01 02:00:00'
    },
    {
      id: 8,
      name: "Tony",
      lastModified: '1990-01-01 02:00:00'
    }
  ]

  constructor() {
    this.jsonObject = <JSON>this.arrayObj;

  }

  ngOnInit(): void {

  
}

In your case

   getArticoliByDesc = (descrizione : string) => {
    return this.httpClient.get<JSON>(`http://${this.server}:${this.port}/api/articoli/cerca/descrizione/${descrizione}`) //ALT + 0096 | ALT GR + '
  }

But still creating a Model class which matched your api response would be the best way to do this. Even though api returns json, Angular http will convert it in to an object. Which you can then generalize by adding your model

Ex:

export class ApiModel{
   property1: string;
   property2: string;
   property3: string;
} 

   getArticoliByDesc = (descrizione : string) => {
    return this.httpClient.get<ApiModel>(`http://${this.server}:${this.port}/api/articoli/cerca/descrizione/${descrizione}`) //ALT + 0096 | ALT GR + '
  }

Thank you very much Mr. Kelum. However, in this case I assume it was a predetermined number of objects. If I wanted to abstract as much of the json document I get from the backend as possible, I guess I'll have to write a pattern inside the angle brackets, right? — Denis, Sep 12 '22 at 15:09
can you look into this answer https://stackoverflow.com/questions/69598837/typescript-dynamic-keys-in-interface — Kelum Bandara, Sep 12 '22 at 15:11

score 0 · Answer 2 · answered Sep 12 '22 at 15:25

If you don't know the response type and you don't care about the typing, you can do:

const result = client.get<any>('URL');

If you know the response is an object but you don't know the properties, you dan do:

const result = client.get<{ [key: string]: unknown }>('URL');

// Or create an alias.
type Data = { [key: string]: unknown };

const result = client.get<Data>('URL');

// Or if you expect an array.
const result = client.get<Data[]>('URL');

If you need typescript to check the type, then you have to know the data type and create a typing for that. For example:

type User = {
  name: string;
  email: string;
}

If you expect the response is a User object => { name, email }

const result = client.get<User>('URL');

If you expect the response is an array of User object => [ { name, email } ]

const result = client.get<User[]>('URL');

If you expect the response is an array of known string variables:

type KnownVariables = Array<'doctor' | 'programmer' | 'designer'>;

const result = client.get<KnownVariables>('URL');

How get dynamic JSON generic type with TypeScript

2 Answers2