Typescript Key-Value Pair Dynamic Typing

Question

Typescript Key-Value Pair Dynamic Typing

Can someone please assist me with this task?

Here is the API response I received:

Week At A Glance: { objA: [{}], objB: [{}] },
records: { Employee Records: [{}], Email Records: [{}], message: "" },
history: { [{}] }

Despite my attempts, I am facing difficulties in creating a model for it. This is what I have come up with so far:

interface DesiredResponse {
    [key: string] : {
        objA: ObjA[],
        objB: ObjB[]
    },
    records: Records[],
    history: History[]
}

interface Records {
    [key: string]: EmpRecords | EmailRecords;
    message: string
}

An error has occured: The property 'records' of type 'Records[]' cannot be assigned to the string index type '{ objA: BbjA[]; objB: ObjB[] }'

The property 'message' of type 'string' does not match the string index type 'EmpRecords | EmailRecords'

I would appreciate any guidance on how to efficiently set up the typing to enable auto-suggestions when using this model.

angular typescript

Answer 1

Answer №1

UPDATE:

The issue lies in a single discrepancy within your code, where the interface is defined to use a list version of the Records interface for the records property while the API response returns an object instead of an array:

interface DesiredResponse {
  // ...
  records: Records; // Initially intended to be Records[]
}

Initial explanation:

The reason for this confusion is that when defining separate properties in a TypeScript interface, semicolons should be used instead of commas, unlike JSON where you typically use commas instead of semicolons:

export interface MyInterface {
  property1: string;
  property2: boolean;
  // and so on
}

as opposed to:

export interface MyInterface {
  property1: string,
  property2: boolean // This syntax would lead to errors
}

Answer 2

UPDATE:

The issue lies in a single discrepancy within your code, where the interface is defined to use a list version of the Records interface for the records property while the API response returns an object instead of an array:

interface DesiredResponse {
  // ...
  records: Records; // Initially intended to be Records[]
}

Initial explanation:

The reason for this confusion is that when defining separate properties in a TypeScript interface, semicolons should be used instead of commas, unlike JSON where you typically use commas instead of semicolons:

export interface MyInterface {
  property1: string;
  property2: boolean;
  // and so on
}

as opposed to:

export interface MyInterface {
  property1: string,
  property2: boolean // This syntax would lead to errors
}

Typescript Key-Value Pair Dynamic Typing

Answer №1

Similar questions

The function fromEvent is throwing an error stating that the property does not exist on the type 'Event'

The Angular selector is unrecognized: double-check that it belongs to the current module if it is an Angular component

Using array values with styled-components may lead to an object being potentially 'undefined'

Assign a class to a DIV element depending on the ID of an object using Angular

Problem with updating Cypress e2e tests following recent package upgrades

To enable the "Select All" functionality in ag-grid's infinite scrolling feature in Angular 4, utilize the header check box

Is there a method to automatically eliminate all unnecessary properties in an Angular project?

Oops! There was an issue with the form field - make sure to include a MatFormFieldControl for proper validation on the

Trigger an event when an Angular template's *ngIf condition is met

Invoke the API when the value of a property in the SPFX property pane is modified

Unable to initiate a new project in Node.js

I am encountering an issue where the nested loop in Angular TypeScript is failing to return

Issue with angular2-query-builder where the drop-down value does not reset or update

Implement real-time word counting in Angular as users type

Testing Angular components with Jest's mocking capabilities

Strategies for increasing the number of images in Angular

Combining Java with Node.js modules

Unexpected error encountered in Angular 2 beta: IE 10 displays 'Potentially unhandled rejection [3] SyntaxError: Expected'

Issues with the alignment of ion-grid in Ionic/Angular application

How can I capture the click event on the oktext in Ionic?