Tips on defining the type of a TypeScript interface

Hello wonderful community,

I am curious about how to properly define this specific type in Typescript. I have been contemplating whether Generics usage could help achieve this. Especially considering that the key for the object will always be different and not follow a normalized model.

{ status_id: { original: "A", new: "B" } },

It is important to note that 'status_id' is just an example and any field could be used instead.

export interface IParsedLog {
  changes?: any; // Can someone guide me on defining this Type in Typescript?
  date: Date;
}

const mock:IParsedLog[] = [
  {
    changes: [
         { status_id: { original: "A", new: "B" } },
         { any_field_id: { original: "A", new: "B" } },
    ],
    date: '10-06-2020',
  },
  {
    changes: [
         { supervisor_id: { original: "Jhon", new: "Jhony" } },
    ],
    date: '10-06-2020',
  }];

Answer №1

export interface IModify {
  [key: string]: ({ initial: string, updated:string});
}

export interface IRecordedEntries {
  adjustments: IModify[], 
  date: Date;
}

const sample:IRecordedEntries[] = [
  {
    adjustments: [
         { status_id: { initial: "A", updated: "B" } },
         { field_id: { initial: "A", updated: "B" } },
    ],
    date: '10-06-2020',
  },
  {
    adjustments: [
         { manager_id: { initial: "Jhon", updated: "Jhony" } },
    ],
    date: '10-06-2020',
  }];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for dynamically altering the bound variable in Angular

Most people understand the concept of interpolation and how to interpolate a single variable with ease. However, what if we need to dynamically switch between two different variables? Let's say we have two class properties: public first: string = &ap ...

Defining TypeScript class events by extending EventEmitter

I have a class that extends EventEmitter and is capable of emitting the event hello. How can I properly declare the on method with a specific event name and listener signature? class MyClass extends events.EventEmitter { emitHello(name: string): void ...

What is the reason behind Typescript's discomfort with utilizing a basic object as an interface containing exclusively optional properties?

Trying to create a mock for uirouter's StateService has been a bit challenging for me. This is what I have attempted: beforeEach(() => { stateService = jasmine.createSpyObj('StateService', ['go']) as StateService; } ... it(& ...

Guide on executing .ts script file and building angular 5 with NPM

I am facing an issue with running a file that has a .ts extension before executing npm run build to build my Angular 5 project. package.json "scripts": { "ng": "ng", "start": "ng serve", "compile": "npm-run-all myts build", "myts": "ts-no ...

Typescript signals that the symbol being exported is not recognized as an exported symbol

I am working on a straightforward project $ ls -l total 32 -rw-rw-r-- 1 ocket8888 ocket8888 72 Apr 29 09:30 index.ts -rw-rw-r-- 1 ocket8888 ocket8888 105 Apr 29 09:31 main.ts drwxrwxr-x 4 ocket8888 ocket8888 4096 Apr 29 09:26 node_modules -rw-rw-r-- 1 o ...

The namespace does not have any exported object named 'LocationState'

I encountered the following issue while attempting to execute my TypeScript application: Namespace '"C:/DevTools/git/motor.ui/node_modules/history/index"' has no exported member 'LocationState'. Here is a snippet from my pack ...

What could be causing this TypeError to appear in my Angular unit testing?

this.columnDefs.forEach((columnDef) => { columnDef.floatingFilter = this.hasFloatingFilter; }); this.gridApi.setColumnDefs(this.columnDefs); ERROR: 'ERROR', TypeError: this.gridApi.setColumnDefs is not a function TypeError: this.gridApi.set ...

Can TypeScript automatically deduce object keys from function argument values?

Consider this function for parsing strings. const { a, b } = parseString({ string, mapping: [{ param: 'a', ... },{ param: 'b', ... }] Is there a way to restrict TypeScript to accept only &a ...

The imported symbol from the typescript library cannot be found

Currently, I am in the process of developing a React/Redux application using Typescript. My goal is to streamline development by creating libraries for each unique "domain" or "feature" that will contain domain-specific details and provide an API to the ma ...

Creating instances of a child class in Typescript using a static method in the parent class, passing arguments and accessing other static methods

Struggling with instantiating a child class from a static method in a base class. Looking to properly specify the return type instead of resorting to using any for all static methods. Tried a solution here, but it falls short when dealing with static metho ...

I've been working on setting up a navbar in React/typescript that links to various routes, but I've hit a snag - every time I try to create a link

import React from 'react' import { Link } from 'react-router-dom' export default function NavBar() { return ( <div className='NavContainer'> <link to='/home'>Home</link> <l ...

Image paths becoming unresponsive following package upgrades

My Angular2 application was originally built using angular-cli (v 1.0.0) and webpack2. Within a component, I had the ability to reference an image like so: <div class="country-flag"> <img [src]="src/assets/flags/32/jp.png" [width]="flagIconSiz ...

Executing a function from within a promise in JavaScript

Understanding the Code In this code snippet, there is a function named placeDecode that takes an HTML input element as a parameter. Inside this function, there is a promise used to convert the input value into a formatted address. The function placeDecod ...

Challenges in handling asynchronous data within static JSON objects in Angular2

I have a service set up with some static objects that are being utilized in my UI. fetchRulesVariables() fetchRuleVariables() { let variables = [ { name: 'Credit Funding Type', id: 1, multiple: ...

How should JSON files stored on the server side be properly utilized in Next.js?

Currently, I have a collection of JSON files that I expose through an API endpoint on my web application for global access. This allows different parts of the application to retrieve the data by sending a fetch request to itself... However, since this inf ...

Directly mapping packages to Typescript source code in the package.json files of a monorepo

How can I properly configure the package.json file in an npm monorepo to ensure that locally referenced packages resolve directly to their .ts files for IDE and build tooling compatibility (such as vscode, tsx, ts-node, vite, jest, tsc, etc.)? I want to a ...

Error in TypeScript: Express route handler does not have any overloads that match this call

Encountering a type error while working on an Express.js application with TypeScript. Here's the relevant code snippet: import express from 'express'; import Stripe from 'stripe'; import { config } from '../config'; impor ...

Issue with `rxjs/Subject.d.ts`: The class `Subject<T>` is incorrectly extending the base class `Observable<T>`

I found a sample template code in this helpful tutorial and followed these two steps to get started - npm install // everything went smoothly, created node_modules folder with all dependencies npm start // encountered an error as shown below- node_mo ...

The Azure function application's automatic reload feature does not function properly with the v4 model

Struggling to get Azure Function to recognize and incorporate changes in source code. I have set up a launch task to initiate the local server and run an npm script with tsc -w in watch mode. While I can see the modifications reflected in the /dist folder ...

Even though my variable is categorized as a number data type, CurrencyPipe is still triggering an Invalid argument exception

After verifying that the variable's typeof is a number, I am still encountering an invalid argument exception when using the CurrencyPipe. Could it be possible that CurrencyPipe imposes additional constraints on input beyond just data type number? c ...