TypeScript recursive object mapping utility

I am currently developing a type-safe object mapper in TypeScript.

So far, I have successfully implemented this at a single level of depth using this playground.

enum TransformerActions { 
  Delete = 'delete',
}

type TransformerMap<S> = { 
  [P in keyof S]?: S[P] extends object
    ? ((s: S) => any) | TransformerActions
  : S[P];
};

interface Name { 
  forename?: string;
  surname?: string;
}

type Person = { currentName: Name, previousNames: Name[] }

const personTransformer1: TransformerMap<Person> = {
  currentName: TransformerActions.Delete
}

const personTransformer2: TransformerMap<Person> = {
  currentName: (s) => s.currentName.forename + ' ' + s.currentName.surname
}

However, when attempting to extend this functionality to support recursive types with nested key transformations, I encountered an issue with the syntax. I tried the following approach:

type TransformerMap<S> = { 
  [P in keyof S]?: S[P] extends object
    ? TransformerMap<S[P]>
  : S[P] | ((s: S) => any) | TransformerActions;
};

Unfortunately, this solution did not work as expected.

I am now seeking guidance on how to create a recursive type in this manner.

Answer №1

If my understanding is correct, how about trying something along these lines?

enum TransformerActions {
  Delete = 'delete',
}

type TransformerFunc<T> = (source: T) => Partial<T>

type TransformerMap<S> = {
  [P in keyof S]?: S[P] | TransformerFunc<S[P]> | TransformerActions | TransformerMap<S[P]>;
};

interface Name {
  forename?: string;
  surname?: string;
}

type Person = { currentName: Name, previousNames: Name[], child: Person }

const personTransformer1: TransformerMap<Person> = {
  currentName: TransformerActions.Delete
}

const personTransformer2: TransformerMap<Person> = {
  currentName: {
    forename: TransformerActions.Delete
  },
  child: {
    currentName: (child) => {
      return {
        forename: `${child.forename?.toUpperCase()} ${child.surname?.toUpperCase}`,
        surname: TransformerActions.Delete
      }
    },
    child: TransformerActions.Delete
  }
}

Take a look at the playground example.

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

Implementing GetServerSideProps with Next-Auth: Error message - Trying to destructure property 'nextauth' from 'req.query' which is undefined

I encountered an issue while using the getServerSideProps function in Next.js with Next-Auth. The error I received was a TypeError: TypeError: Cannot destructure property 'nextauth' of 'req.query' as it is undefined. Upon checking with ...

Using TypeScript TSX with type parameters

Is it possible to define type parameters in TypeScript TSX syntax? For instance, if I have a class Table<T>, can I use something like <Table<Person> data={...} /> ...

Setting up Zurb Foundation in a VueJS TypeScript project: Step-by-step guide

I'm currently facing a challenge involving the integration of Zurb Foundation v6.5.3 into a VueJS project that is TypeScript-based and was created using @Vue/CLI. The project already includes jQuery type definitions. In the code snippet below, you can ...

Error in typescript: The property 'exact' is not found in the type 'IntrinsicAttributes & RouteProps'

While trying to set up private routing in Typescript, I encountered the following error. Can anyone provide assistance? Type '{ exact: true; render: (routerProps: RouterProps) => Element; }' is not compatible with type 'IntrinsicAttribu ...

Encountering a TypeScript Error when trying to customize the MUI color palette

I'm attempting to incorporate a custom color in MUI v5 using TypeScript, but I keep receiving the error: Type '"my_custom_color"' is not allowed for type '"primary" | "inherit" | "secondary" | "success" | "error" | "info" | "warning" ...

Guide to accessing component methods within slots using the Vue 3 Composition API

I have child components within a slot in a parent component and I am trying to call methods on them. Here are the steps I followed: Use useSlots to retrieve the child components as objects Expose the method in the child component using defineExpose Call t ...

utilize the useRef hook to display the total number of characters within a text area

Introducing the following component: import React from 'react'; export interface TexareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { maxLength?: number; id: string; } export const Textarea = React.forwardRef( ( ...

one-time occurrence of $mdToast injection within a parent class

Seeking advice on how to efficiently place a single instance of $mdToast (from Angular Material) into a base class (Typescript). In my UI, I have five tabs with separate controller instances and it seemed logical to centralize the $mdToast declaration in a ...

When trying to click the button in Navbar.jsx, I encounter an error when attempting to invoke the setShowCart(true) function

I've encountered an issue while trying to call the setShowCart(true) function in Navbar.jsx. I'm unsure of how to fix this. import React from 'react' import Link from 'next/link'; import {AiOutlineShopping} from 'react-ic ...

The Angular Component utilizes the ng-template provided by its child component

I am currently facing an issue that involves the following code snippet in my HTML file: <form-section> <p>Hello</p> <form-section> <ng-template test-template> TEST </ng-template> ...

Issue with TagCloud functionality when deployed on Vercel platform

Everything functions perfectly on my local machine, but once deployed to Vercel, the display disappears. I've double-checked the text, container, and TagCloud - all showing the correct responses. I even tried uninstalling and reinstalling TagCloud wit ...

angular 6 personalized material icons with ligature assistance

Can I create my own custom material icons with ligature support? Currently, I use svgIcon to get Custom Icons, Is there a way to make custom icons that support ligatures? Here is my current code snippet: app.component.ts import { Component } from &ap ...

Mapped Generics in Typescript allows you to manipulate and

Currently, I am attempting to utilize TypeScript generics in order to transform them into a new object structure. Essentially, my goal is to change: { key: { handler: () => string }, key2: { hander: () => number }, } to: ...

Nest is unable to resolve the dependencies of the ItemsService. Ensure that the required argument at index [0] is present within the AppModule context

After following the Nest JS Crash tutorial from a Youtube Link, I encountered an error when importing an interface in the service. Nest seems unable to resolve dependencies of the ItemsService. It's important to ensure that the argument at index [0 ...

Exploring deep nested components and elements in Angular for a targeted specific functionality

Is it possible to apply the ng deep css class to only one specific checkbox in my component, rather than all checkboxes? I want to customize just one checkbox and leave the others unchanged. How can this be achieved? Thank you. I need the CSS modificatio ...

Embed the value of an array in HTML

Upon running console.log, the data output appears as follows: {TotalPendingResponseCount: 0, TotalRequestSendCount: 1, TotalRequestReceivedCount: 1, TotalRequestRejectCount: 3} To store this information, I am holding it in an array: userData : arrayResp ...

Implementation of a function in Typescript that can be defined with a

I am currently diving into the Typescript specification and I'm facing a challenge in creating a functional implementation for describable functions. https://www.typescriptlang.org/docs/handbook/2/functions.html The provided example lacks completene ...

Observable function encountering difficulties returning nested values

I've been working on a function that returns an observable. test(id: int): Observable<Group>{ this.http.get('test/').subscribe( (result:any) => { resultingVal = Group.fromJson(result.group); }); } Right now, the function ...

Empty nested Map in POST request

I am currently working on a springboot application with a React/Typescript frontend. I have defined two interfaces and created an object based on these interfaces. export interface Order { customer_id: number; date: Date; total: number; sp ...

Struggling to launch on Vercel and encountering the error message, """is not allowed by Access-Control-Allow-Origin. Status code: 204""

Greetings! I trust you are doing well. Currently, I am engrossed in developing a full-stack application. The app runs smoothly on localhost without any issues. However, upon deploying both the server and front end on Vercel, a snag arose when attempting to ...