Refine current attributes of an object in Typescript

In typescript, I have an object of type any that needs to be reshaped to align with a specific interface.

I am looking for a solution to create a new object that removes any properties not defined in the interface and adds any missing properties.

An example code snippet is provided below:

interface ImyInterface {
  a: string;
  b: string;
  c?:string;
};

let myObject = {
  a: "myString",
  d: "other value"
};

My query is: Is there a method to filter and convert the myObject so that it adheres to the structure outlined in the ImyInterface interface, resulting in:

console.log (JSON.stringify(objectA));
> {a: 'myString', b: null}

Answer №1

While there could potentially be an alternative approach, here is a solution that comes to mind:

    let defaultObj: ICustomInterface = { a: null, b: null };
    let newObj: ICustomInterface = { ...defaultObj, ...customObj };

The initial line creates an object that adheres to the specified interface.

Subsequently, a new object is defined based on the desired interface and includes all properties from defaultObj, followed by any relevant properties from customObj.

IMPORTANT: Attempting to use only this code snippet:

let newObj: ICustomInterface = { ...customObj };

Would result in an error indicating missing interface properties. This emphasizes the necessity of first creating a "complete" object (defaultObj in this instance).

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

Display a pop-up alert message when the session expires without the need to manually refresh the page

I have a query regarding the automatic display of an alert message. Even though I have set the time limit to 10 seconds, I still need to manually refresh the page for the alert message to appear. The alert message should notify the user that the session ...

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

Unable to establish breakpoints in TypeScript within VS Code

I seem to be facing an issue while trying to set breakpoints in my TypeScript nodejs app using Visual Studio Code. Despite following the guidelines provided on the Visual Studio Code website, I have not been able to achieve success. Below is the content o ...

Having trouble parsing a JSON object using the fetch method in React while trying to retrieve data from my database

While using fetch with the "get" method, I encountered an issue where passing the response from my SQL database to my object using useState results in an empty object. However, when I print the response data from my database through console logs, it shows ...

An essential component of Chai assertion is the inclusion of "or"

While attempting to iterate through a list of elements, I am looking to verify that the body contains either of two values. However, the current assertion method only allows me to check for one value: expect(cellText).includes(toDateFormat); Is there a wa ...

What Are the Possible Use Cases for Template Engine in Angular 2?

For the development of a large single page application (SPA) with Angular 2.0, I have decided to utilize a template engine like JADE/PUG in order to enhance clarity and clean up the code. My goal is to achieve optimal performance for the application. Th ...

How to retrieve JSON data from unidentified objects using JQuery

I have made an AJAX call and received a JSON file as the response: [ { "LINKNAME": "Annual Training", "HITS": 1 }, { "LINKNAME": "In Focus Newsletter", "HITS": 1 }, { "LINKNAME": "NITA (secured)" ...

Tips for syncing the state data stored in local storage across all tabs with Ngxs state management

After converting the state data to base64 format using the Ngxs state management library, I am saving it. While I can retrieve all data across different tabs, any changes made in one tab do not automatically sync with other tabs. A tab refresh is required ...

Creating a dynamic Bootstrap 5 carousel with active class on the first item and indicators

I am curious to know how to create a dynamic Bootstrap 5 carousel. Specifically, I want to know how to display indicators dynamically and add an active class to the first item of the carousel. In Bootstrap 4, it is done in the following way: $('#main ...

Updating HTML in Vue.js with data at a specific index value can be done by targeting

Experimenting with a combination of vue.js and vanilla to create a blackjack game. The card data is stored in the vue data() like this: data(){ return { cards: [ {id: 1, cardName: 'Ace of Spades', cardPic: ' ...

Exploring Angular2's interaction with HTML5 local storage

Currently, I am following a tutorial on authentication in Angular2 which can be found at the following link: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492 I have encountered an issue with the code snippet below: import localSt ...

Updating your Heroku app (Node.js) from a GitHub repository - a step-by-step guide

I attempted to deploy my React app using the following process: git status git remote add origin <repo link> git commit -m "node js" git add . Unfortunately, this method did not work for me. Can anyone provide guidance on how to update a ...

What is the best way to select types conditionally based on the presence of a property in another type?

To begin with, I have a specific desired outcome: type Wrapper<ID extends string> = { id: ID }; type WrapperWithPayload<ID extends string, Payload> = { id: ID, payload: Payload }; enum IDs { FOO = "ID Foo", BAR = "ID Bar", BAZ = "ID Baz ...

What is the best way to populate a dropdown menu by matching keys from an array within an ng-repeat

My JSON structure looks like this: 101 : "List": [ { "Name": "Pink" }, { "Name": "Black" } ] 102 : "List": [ { "Name": "Red" }, { "Name": "Yellow" } ] $sco ...

The absence of type-safety in the MUI System sx is a glaring issue

I want to ensure that the TypeScript compiler can identify typos in my MUI System sx props: import { Box, SxProps, Theme, Typography } from '@mui/material' const sxRoot: SxProps<Theme> = { width: '100vw', height: '10 ...

Sorting an array of objects in TypeScript may result in a type error

My data includes various categories, ages, and countries... const data = [ { category: 'Fish', age: 10, country: 'United Kingdom' }, { category: 'Fish', age: 9, country: 'United Kingdom' }, { category: ...

executing a hook within _app.tsx in Next.js

The issue I'm facing involves the rendering of a hook that helps determine if my components are within the screen's view to trigger animations. This hook is executed in _app.tsx, however, it doesn't run when switching to another page. Oddly ...

Enhancing User Interfaces with JQuery UI Widgets and Dynamic AJAX Calls

Currently involved in geolocation and mapping work, I am creating a JQuery widget to ensure that the code is portable for future projects. However, I have hit a roadblock when it comes to making an AJAX request. Below are a couple of methods from my widge ...

Positioning broadcasted videos on a web page using the OpenTok API

Currently, I am utilizing opentok to connect to the broadcast service and obtaining the flash player object at the bottom of my page. I am seeking guidance on how to position it within a specific div container. The following code snippet demonstrates how ...

Angular routing does not properly update to the child's path

I've organized my project's file structure as follows: app/ (contains all automatically built files) app-routing.module.ts components/ layout/ top/ side/ banner/ pages/ ...