Create a TypeScript interface that represents an object type

I have a Data Structure, and I am looking to create an interface for it. This is how it looks:

const TransitReport: {
        title: string;
        client: string;
        data: {
            overdueReviews: number;
            outstandingCovenantBreaches: number;
            outstandingMarginingBreaches: number;
            periodStartDate: string;
            periodEndDate: string;
        };
    }[]

My attempt at creating an interface was as follows:

export interface TransitReport {
  title: string;
  client?: string;
  data: Record<string, unknown>;
  overdueReviews: number;
  outstandingCovenantBreaches: number;
  outstandingMarginingBreaches: number;
  periodStartDate: string;
  periodEndDate: string;
}

Although this worked for mock API calls, I encountered an error when writing test cases:

The type '

{ title: string; 
client: string; 
data: { 
overdueReviews: number; 
outstandingCovenantBreaches: number; 
outstandingMarginingBreaches: number; 
periodStartDate: string;
periodEndDate: string; 
}; }' 

is missing properties such as overdueReviews, outstandingCovenantBreaches, outstandingMarginingBreaches, periodStartDate, and periodEndDate that are present in the 'TransitReport' type.

Answer №1

Update your interface structure for TransitReport according to the following code snippet to include necessary properties like overdueReviews, periodEndDate, etc., within the data record. Failure to do so will result in these properties being checked under the root TransitReport object where they are not present.

export interface TransitReport {
    title: string;
    client?: string;
    data: DataRecord;
}

export interface DataRecord {
    overdueReviews: number;
    outstandingCovenantBreaches: number;
    outstandingMarginingBreaches: number;
    periodStartDate: string;
    periodEndDate: string;
}

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

Error message: The attempted import failed because ' is not exported from the module

I am facing an issue with resolving my problem. In a file named lama.d.ts, I have declared a class using the following code: export declare class lama { // code here } After that, I tried to import this class in another file within the same folder ...

Tap the <li> element in a select2 dropdown from Bootstrap using internjs

I am currently encountering an issue while trying to select values from a Bootstrap-select2 drop-down in my form during the process of writing some function tests. If Select2 is unfamiliar to you, here are some examples that may help: The drop-downs are ...

Create geometric shapes on Google Maps version 2

Can anyone guide me on how to draw a polygon on Google Maps with user-input coordinates? I have two input fields for latitude and longitude, and when the user clicks the button, I want the polygon to be drawn. The code I currently have doesn't seem to ...

Set up a WhatsApp web bot on the Heroku platform

I am currently in the process of developing a WhatsApp bot using the node library whatsapp-web.js. Once I finish writing the script, it appears something like this (I have provided an overview of the original script) - index.js const {Client, LocalAuth, M ...

Unlock the power of asynchronous dependencies on a global scale with Inversify

I'm looking to resolve an asynchronous dependency at the top level without relying on top-level awaits. Currently, I've implemented a temporary solution by defining an asynchronous function getService() in the controller file. However, this appr ...

Error: The array's property is not defined

I am currently working on a visualization tool for sorting algorithms, but I keep encountering an error that says "Cannot read properties of undefined (reading 'map')" in line let bars = this.state.array.map((value, index) =>. You can find my ...

Is there a reason why async functions do not function properly within a controller's get() handler?

Utilizing Node and Express along with the mssql npm package, I establish a connection to an SQL Server database in my app.js file by setting up a global variable that creates a connectionPool (I've excluded some boilerplate code for brevity): const m ...

Expanding constructor in TypeScript

Can the process described in this answer be achieved using Typescript? Subclassing a Java Builder class This is the base class I have implemented so far: export class ProfileBuilder { name: string; withName(value: string): ProfileBuilder { ...

Converting CommonJS default exports into named exports / Unable to load ES module

I've encountered an issue while creating a Discord bot with discord.js using TypeScript. When attempting to run the resulting JavaScript code, I'm facing an error that states: import { Client, FriendlyError, SQLiteProvider } from 'discord.js ...

Customize the HTML tags in the Froala text editor with easy insertion and removal

In my AngularJS project, I am utilizing Froala editor. I want to create a unique functionality where a custom button wraps selected text with <close></close> tags when activated. Moreover, if the selected text is already wrapped with these tags ...

What is the best way to handle the resolution of multiple promises as they complete?

Suppose I have three different promises each taking a varying amount of time to resolve - 1000ms, 2000ms, and 3000ms respectively. How can I simultaneously start all the promises and handle them as they get resolved? For instance: let quickPromise = new ...

Conceal and unveil stationary navigation when scrolling back to the very top of the screen

My current setup includes a navigation that dynamically hides as the user scrolls down and reappears when scrolling up. Additionally, I have applied the class .fixed on #top-wrapper to alter the layout/styling of this specific div. However, I am facing dif ...

Creating subdocuments with input types in MERN stack using Apollo Sandbox and MongoDB mutations

These questions are specific to a Node server application built in JavaScript using express, apollo-server-express, mongoose, and graphql. Below is the content of the package.json file: { "name": "dimond-media-mern-app", "vers ...

Retrieve an XML document using AJAX and then convert it to JSON format without needing a server

Seeking assistance with a code snippet I'm currently working on. Unfortunately, my knowledge of AJAX and jQuery is limited. Here's the issue: I am trying to retrieve XML data from an external XML file (text.xml) and convert it into a JSON object ...

An error occurred due to an unexpected token found in the JsonForms custom-renderer props

I found inspiration in an example from this website to develop a custom renderer for JsonForms using Vue: However, as I implement this example in my .vue file within the script tags, I encounter an error UnexpectedToken right after declaring the props. It ...

How to enhance mouse tracking beyond browser window boundaries in Three.js and across various page elements

I'm facing an issue with my three.js scene where I have buttons positioned on top and off to the side of the scene. When you click and drag to spin the camera, the spinning stops when dragging over the buttons or outside the window. I am using three.j ...

Tips for modifying the content displayed on a v-list in Vue.js dynamically

I am looking to create a dynamic list that displays data based on the selected key. The list will contain multiple items with different keys, and I want the flexibility to choose which data to display without hardcoding the actual key value. <template&g ...

What is the method or variable called "afterShow" used for in FancyBox V4 and how does it differ from its counterpart in JQuery-FancyBox V3?

We previously utilized the V3 edition of Fancybox, incorporating our increaseImageClicks and increaseVideoClicks functions within its afterShow function: /* FANCYBOX OLD (https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/): * ...

Using the clientWidth property in React

While I have a solid background in Javascript, I am relatively new to working with React. In my previous projects where I coded directly in javascript for the browser, I frequently used the following code snippet: width = document.getElementById('elem ...

Maximizing the Efficiency of jQuery and Javascript Frameworks

Currently, I am working on a project that involves utilizing a JavaScript framework (jQuery) in conjunction with various plugins (validation, jquery-ui, datepicker, facebox, and more) to enhance the functionality of a modern web application. However, I ha ...