What is the process for designing a type that accepts an object and provides an updated version?

Is there a way to create a function that can take an object and return a modified version of that object in this format?


const data = {
  email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08a8f888ea0848f85ce838f8d">[email protected]</a>',
}

// I'm currently struggling with this part
type WrappedInput<T, K extends keyof T> = { [key: K]: { set: T[K] } }

function toInput<T = unknown>(data: T): WrappedInput<T> {
  return {
    email: {
      set: data.email
    }
  }
}

Each key needs to be enclosed within a set key.

typescript

Answer №1

This example demonstrates a simple use case of a mapped type:

type WrappedValue<T> = { [K in keyof T]: { value: T[K] } }

Notice the use of the in operator in the type definition, which signifies that this is a mapped type and not a string index signature. In this mapped type, each key K in the union of all keys keyof T is processed individually.

An implementation based on this mapped type could be:

function wrapValues<T>(data: T): WrappedValue<T> {
  return Object.fromEntries(
    Object.entries(data).map(([key, val]) => [key, { value: val }])
  ) as any;
}

(provided that the environment supports Object.fromEntries() and Object.entries() methods).

Let's test this implementation:

const wrappedData = wrapValues(data);
console.log(wrappedData.email.value.toUpperCase()) // <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="123456789abcdef">[email protected]</a>

Seems to be functioning as intended.

Link to Playground

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

Exploring the Benefits of Utilizing the tslint.json Configuration File in an Angular 6 Project

https://i.stack.imgur.com/j5TCX.png Can you explain the importance of having two tslint.json files, one inside the src folder and one inside the project folder? What sets them apart from each other? ...

angulartypescriptangular6tslint

determine function output based on input type

Here's a question that is somewhat similar to TypeScript function return type based on input parameter, but with a twist involving promises. The scenario is as follows: if the input is a string, then the method returns a PlaylistEntity, otherwise it ...

javascripttypescriptgenericsconditional-types

What is the best approach to eliminate the 'false' type within a setState function in React?

Hey, I've been working on a project that involves using the useState hook and dealing with state using generics. I encountered an issue where I manipulated a fetched array within a setState function using the filter method, which resulted in returnin ...

javascriptreactjstypescriptgenerics

Importing Typescript modules by specifying their namespace instead of using a function

I have been working on a project where I needed to generate typings from graphql using the gql2ts library. In the gql-2-ts file, I initially used a namespace import for glob, which resulted in TypeScript showing me an error as intended. I then switched the ...

node.jstypescriptgraphqltsconfig

Is Angular 2+ responsible for loading the entire module or only the exported components within it?

I'm dealing with a situation where I have a large module but only need to export one specific component. I'm wondering if Angular loads the entire module or just the exported components, as I want to optimize performance without compromising the ...

javascriptangulartypescript

Utilizing a function within the catchError method

A function has been defined to handle errors by opening a MatSnackBar to display the error message whenever a get request encounters an error. handleError(err: HttpErrorResponse) { this.snackBar.open(err.message) return throwError(err) } When subs ...

angulartypescripterror-handlingrxjs

Angular 2: Utilizing Http Subscribe Method with "this" Context Pointer

Question: http.request('js/app/config/config.json').subscribe(data => { this.url = data.json().url; }); It seems that "this" is pointing to Subscriber instead of the parent class. I was under the impression that the fat- ...

angulartypescript

Optimal approach to configuring Spring Boot and Angular for seamless communication with Facebook Marketing API

Currently, I am working on a Spring Boot backend application and incorporating the Facebook marketing SDK. For the frontend, I am utilizing Angular 10. Whenever I create a new page or campaign, my goal is to send the corresponding object back to the fronte ...

javatypescriptfacebook-marketing-api

How can I prevent the installation of my Ionic 2 application on devices that have been rooted or jailbroken?

I am currently working on a project involving an Ionic 2 and Angular 2 application. I need to implement a feature that checks whether the device is rooted (in the case of Android) or jailbroken (in the case of iOS). I have experimented with various packag ...

angulartypescriptcordovaionic2

The parameter cannot be assigned to type 'HTMLCanvasElement | null' due to conflicting arguments

I am encountering an issue with the following code, as it fails to compile: import React, {useEffect} from 'react' import {Card, Image} from 'semantic-ui-react' import * as chart from 'chart.js' export const PieChartCard = ...

reactjstypescriptreact-typescript

Tips for sending an array containing objects with an ID using Angular

Can you give me your thoughts on how to post an array with some object? This is the code I am working with: const selectedJobs = this.ms.selectedItems; if (!selectedJobs) { return; } const selectedJobsId = selectedJobs.map((jobsId) => ...

arraysangulartypescriptobject

Sharing information between different pages in NEXT.js version 14

After performing a fetch and receiving a successful response containing data as an object, I use router.push to redirect the page to another one where I want to display the fetched data. const handleSubmit = async (event: any) => { event.preventDefa ...

typescriptnext.jshttpresponse

Error message thrown by node express.js indicating that response headers cannot be reset once they have been sent

As a newcomer to both node and express, I may be making a silly mistake. If you want to see the complete source code, please visit: https://github.com/wa1gon/aclogGate/tree/master/server logRouter.get("/loggate/v1/listall", function(req, res) { let ...

javascriptnode.jsexpresstypescript

Angular 2 has its own version of $q.when called RxJs

Back in the AngularJS 1.* days, I used to have this code snippet to refresh the auth-token: ... if (!refreshTokenInProgress) { refreshTokenInProgress = AuthService.refreshToken(); } $q.when(refreshTokenInProgress, function () { refreshTokenInProgre ...

angularjsangulartypescriptrxjs

Module 'csstype' not found

I am diving into the world of React with TypeScript. After setting up react and react-dom, I also installed @types/react and @types/react-dom which all went smoothly. However, a pesky error message keeps popping up: ERROR in [at-loader] ./node_modules/@t ...

reactjstypescript

Array - Modifications do not pass down to the child component

I am observing the following structure in the code: <div id="join-container"> <join-chain id="my-join-chain" [selectedColumn]="selectedColumn" (updatedStatements)=onUpdatedStatements($event)> </join-chain> <tile-ca ...

angulartypescript

Ensure that the method is passed a negative number -1 instead of the literal number 1 from an HTML error

This is an example of my HTML code: <button (mousedown)="onMouseDown($event, -1)"></button> Here is the TypeScript code for handling the mouse down event: onMouseDown(e: MouseEvent, direction: 1|-1) { this.compute.emit(direction); ...

htmlangulartypescript

Localization of labels and buttons in Angular Owl Date Time Picker is not supported

When using the Owl Date Time Picker, I noticed that the From and To labels, as well as the Set and Cancel buttons are not being localized. Here is the code snippet I am using to specify the locale: constructor( private dateTimeAdapter: DateTimeAdapter&l ...

javascriptangulartypescriptangular6

Tips for neatly wrapping a class constructor

Currently, I am experimenting with code to create a more streamlined Angular Dialog initializer. This initializer should be passed a constructor function along with its arguments in a type-safe manner. The current implementation works, but it is challengi ...

typescript

Bar chart in Chart.js becomes crowded and illegible on smaller screens due to overlapping bars

Hello there! I've encountered an issue where the bar chart overlaps when the screen width is too low. It seems to be related to the maintainAspectRatio property, which I set to false because I wanted the charts to shrink only in width, not in both axe ...

angulartypescriptchart.jsng2-charts