Creating an additional attribute for a specific object type without needing to use any runtime code

type FormerActionsCustom =
  | {
      type: "ACTION_1"
      payload: string
    }
  | {
      type: "ACTION_2"
      payload: number
    }

type CustomConverter = ...

type UpdatedActions = CustomConverter<FormerActionsCustom, "group", "SECTION">

//expected output
type UpdatedActions =
  | {
      group: 'SECTION'
      type: "ACTION_1"
      payload: string
    }
  | {
      group: 'SECTION'
      type: "ACTION_2"
      payload: number
    }

In order to achieve the desired outcome, I aim to implement a CustomConverter "type function" that accepts the specified arguments and generates a type identical (or structurally equivalent) to UpdatedActions.

I believe leveraging mapped types for property addition along with conditional types designed for distributive operations within the | construct might be the way to go.

typescript

Answer №1

Give it a shot

type ID<T> = {[Key in keyof T]: T[Key]}  
type Transformer<T, Key extends string, Value> = T extends any ? ID<Record<Key, Value> & T> : never

Perhaps this might work?

https://i.sstatic.net/XwNrZ.png

The concept is to extend the type T with T extends any ? ..., and then combine each element with Record<Key, Value> from the standard library. In conclusion, the use of ID<T> simply traverses through a type and produces key-value pairs.

However, ultimately, I believe that type is essentially identical to just Record<Key, Value> & T. The process of extension and merging is mainly for aesthetics (although it may also avoid certain anomalies while introducing some as well.)

I hope this explanation was helpful. Best of luck!

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

Refresh the state by selecting an object from the dropdown menu

I have a TaskTypes object with various properties nested inside. -LJLQR7lVkbzsxAZC3JI: {code: "Pest & Disease", colour: "0xf2473f", deleted: null, subTypes: {…}} -LJLQR7mZaeBNnEhdHtU: {code: "Health & Safety", colour: "0x8c5de4", deleted: null, ...

reactjstypescriptstatejsx

When working with multiple charts on Angular ChartJs, the data may not display properly

My goal is to display multiple Charts in a single page using Angular. I came across an Example that uses ViewChildren: const baseConfig: Chart.ChartConfiguration = { type: 'pie', options: { responsive: true, } }; @ViewChildren('c ...

javascriptangulartypescriptvisual-studiochart.js

It seems that every time you save data in Angular, the local storage array gets overwritten

While using Angular, I encountered an issue with saving to local storage. The code works fine for saving items initially, but on refreshing the page and trying to add more objects to the local storage array, it overwrites instead of appending. Can you help ...

arraysangulartypescriptlocal-storage

Tracking code execution in React, Enzyme, and Istanbul reveals uncovered functions running during tests

I have been working on testing a React component that involves 3 functions. The tests I've written for these functions pass successfully, but my code coverage report indicates only a 33% coverage. Here is the code snippet of the component: const AddW ...

reactjstypescriptcode-coverageenzymeistanbul

Guide on incorporating the authorization function from next-auth into a TypeScript Next.js 13 app directory

Can you help me understand the proper way to declare the authorize function in [...nextauth].ts? I have been attempting it as shown below: export default NextAuth({ session: { strategy: "jwt" }, providers: ...

reactjstypescriptnext.jsnext-auth

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace: this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product[&apos ...

javascripthtmlcsstypescriptionic-framework

Guide to developing a universal store extension

I've been attempting to create a reactive global $store object using a plugin, but so far I have not been successful in getting it to function as intended. store.ts: import {reactive} from "vue"; export default { install: (app:any, opt ...

typescriptvue.jspluginsvuejs3store

How do I assign a default value to an optional parameter in a derived class in Typescript?

One of my classes is called ClientBase: export class ClientBase { constructor(private uri: string, private httpClient: HttpClient) { } // Contains Various Methods } I have multiple subclasses that are derived from the ClientBase For instance: @I ...

javascripttypescript

Is it possible to measure the CPU utilization in a TypeScript application programmatically?

Is there a method to calculate CPU usage as a percentage and record it in a file every 20 milliseconds? I'm interested in exploring different approaches for accomplishing this task. Your insights would be greatly appreciated! I've come across so ...

angulartypescriptcpucpu-usageram

What is the method to remove curly brackets from a different data category?

If I have a type like this type Z = {a: number} | {} | {b: boolean} | {c: string} | ...; Is there a way to get the same type but without {}? type Y = Exclude<Z, {}>; ⇧This will result in Y = never, because all variants can be assigned to {} and a ...

typescript

Rect cannot be resized using mouse events

I am currently working on resizing the rectangle inside the SVG using mouse events. To achieve this, I have created another circle shape at the right bottom edge of the rectangle and implemented resize events on that shape. However, I'm facing an issu ...

javascriptreactjstypescriptsvgevent-handling

Check the type of the indexed value

I need help with a standard interface: interface IProps<T> { item: T; key: keyof T; } Is there a way to guarantee that item[key] is either a string or number so it can be used as an index for Record<string | number, string>? My codeba ...

typescripttypescript-generics

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

https://i.stack.imgur.com/PpFlB.pngI currently have multiple Arrays containing various inputs this.listNumber = [ { "GenericQuestions": [ { "input": "long", }, { "input": & ...

javascriptangularjstypescript

Tips for including an element at the start while creating a map()

enum StatusEnum { accepted = "AC", rejected = "RJ", } const select = (Object.keys(StatusEnum) as Array<keyof typeof StatusEnum>).map((x) => ({ value: x, name: x + "_random", })) /** * Console.log(select) * [ ...

javascripttypescriptvue.js

Error: The specified updateTag type in the Angular SEO service is not compatible

I am in the process of developing an SEO service using Angular's Meta service (https://angular.io/api/platform-browser/Meta) Within the service, there is a method for managing social media tags that seems to be encountering issues and producing the f ...

angulartypescriptserviceseo

I am searching for the vector geometric shapes svg elements that are commonly utilized in design editors. Can you point

When it comes to design editors, there are plenty of options such as Canva, Vistacreate, and Adobe Express. Each one uses a variety of styles for elements/objects/shapes. Are there any databases where I can find these resources? Some popular places include ...

typescriptsvgeditorfabricjs

Adding a custom role in Angular TypeScript in Microsoft AppInsights is a straightforward process that can provide valuable

I have an angular project where I am looking to incorporate AppInsight with custom telemetry (role). The project is built in Angular using TypeScript, and I successfully integrated appinsights by following this tutorial. However, when attempting to add cus ...

angulartypescriptappinsights

In a production environment, disable caching for server functions in Next.js

In my Next.js 14 project, I have a page that utilizes default Server-side Rendering (SSR) to fetch data and pass it to client components. export default async function Page() { const magazines = await getMagazines(true); return ( <Box sx= ...

typescriptnext.js

Is there a way to send both a file and JSON data in a single HTTP request?

Once I developed a small application using NestJs where I implemented a BFF (Backend for Frontend) service. Within this service, I tried to execute a POST request to create a new user while also including the user's avatar in the same request. Here is ...

node.jstypescripthttpnestjs

Deduce the generic types of child components based on the type of the

In my quest to develop a table component that utilizes components to define columns, I came up with the following structure: interface UsageModel { title: string; } const Usage = () => { const data: UsageModel[] = [{ title: "Stack Overflow&qu ...

reactjstypescript