如何使用 TypeScript 获取动态 JSON 泛型类型

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.

Answer 1

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 + '
  }

Answer 2

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');