Mastering the typing of manipulated objects with Typescript

I have a unique object structure where each property holds a different type of function, all taking the same parameter and returning distinct objects.

const initialObj = {
  a: (c: number) => ({ c }),
  b: (c: number) => ({ d: c }),
}

Now, I aim to generate another object based on this structure. The new object should mirror the keys of the original, with values as the objects returned by the functions:

{
  a: { c: 4 };
  b: { d: 4 };
}

I attempted to define the typing like so:

{ [Key in typeof keyof initialObj]: ReturnType<typeof initialObj[Key]> }

However, this produced a union type output:

{
  a: { c: number } | { d: number };
  b: { c: number } | { d: number };
}

The desired final result is as follows:

{
  a: { c: number };
  b: { d: number };
}

Would it be feasible to achieve this, and if so, how can I correctly define the typings?

Answer №1

Your solution is almost there, but you have mistakenly swapped typeof and keyof.

type Foo = { [Key in keyof typeof initialObj]: ReturnType<typeof initialObj[Key]> }

For a better understanding, check out this typescript playground link. It illustrates how a variable of type Foo should behave. Keep in mind that older versions of TypeScript might not support this syntax.

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

Leveraging React Hooks to display a dynamic pie chart by fetching and mapping data from an API

I have a task where I need to fetch data from an API that returns an object containing two numbers and a list structured like this... {2, 1 , []} The project I'm currently working on utilizes 'use-global-hook' for managing state in Redux. T ...

Mastering the art of crafting an Angular Domain Model accurately

When creating a domain model, is it best to define and set the properties inside the constructor for efficiency? In my attempt below, I have defined the properties outside the constructor. Should I be setting them only inside the constructor to reduce the ...

Implementing Facebook Javascript SDK to enable login and trigger re-authentication using React Web and Typescript within a component

As a newcomer to stack overflow, I welcome any suggestions on how I can improve my question. I'm in need of guidance concerning logging a user into facebook and requiring them to authenticate their profile or select another profile manually, rather t ...

Next.js Link component causing full page reload during navigation

https://i.sstatic.net/grFfS.png Whenever I navigate to the "about" page, my browser automatically reloads. I've tried adjusting the structure using TypeScript by removing all file extensions, but the issue persists. I also attempted switching to a di ...

TypeScript PatchBaseline with AWS CDK

I am currently working with the AWS CDK and TypeScript, utilizing the @aws-cdk/aws-ssm library to create a PatchBaseline. While I have successfully created the Patch baseline, I'm encountering difficulties when attempting to define approvalRules. I ca ...

Animated drop-down menu in Angular 4

I recently came across this design on web.whatsapp.com https://i.stack.imgur.com/ZnhtR.png Are there any Angular packages available to achieve a dropdown menu with the same appearance? If not, how can I create it using CSS? ...

Tips for integrating TypeScript with Vue.js and Single File Components

After extensive searching online, I have struggled to find a straightforward and up-to-date example of setting up Vue.js with TypeScript. The typical tutorials out there either are outdated or rely on specific configurations that don't apply universal ...

Seeking the identification of recursive components in Vue3- what's the way?

I am facing a challenge with my component called Group, which has the ability to contain recursive components. Within this Group component, there is another component named ButtonsContainer. The ButtonsContainer component provides functions to focus on the ...

What Mac OSX command can you use in Typescript to input the quote character for multiline text?

Just starting out with Angular 2 and working through the official tutorial at https://angular.io/docs/ts/latest/tutorial/toh-pt1.html. I've realized that to use multi-line template strings (string interpolation), I have to use the ` mark. Any tips fo ...

What is the best way to prevent event propagation in d3 with TypeScript?

When working with JavaScript, I often use the following code to prevent event propagation when dragging something. var drag = d3.behavior.drag() .origin(function(d) { return d; }) .on('dragstart', function(e) { d3.event.sourceEvent ...

The 'GoogleAuthProvider' property cannot be found on the 'AngularFireAuth' type

When attempting to sign in with Google using 'AngularFireAuth', I encountered an error. Here is the code snippet from my auth.service.ts file: import { Injectable } from '@angular/core'; import { first } from 'rxjs/operators'; ...

The react-bootstrap module does not have any members available for export

I'm looking to incorporate the npm module react-bootstrap from this link into my Layout component, following the ASP.NET Core 2.1 template client project structure. The challenge I'm facing is that the template uses a .js file extension, but I pr ...

Navigating with Angular 6 using routerlink in a child module with router-outlet specified in the parent component (app.component

I'm currently working with the RouterModule and encountering an issue with the routerLinks. The problem I am facing is that the routerLinks are not functioning properly (the anchor tags are not clickable). This issue arises because they are located w ...

Allowing the property of interface/type to not overlap

Is there a way to consolidate multiple interfaces/types in Typescript by merging them? The resulting interface should have all shared properties as mandatory and all unique properties as optional. Here is an example: interface ShopUser { userId: string ...

The Promise.then() function is not patient

Whenever I attempt to use Promise.then(), the events from this.events, this.tmEvents, and this.totalEvents keep logging before the promises are fully complete. Even when I tried implementing async/await to prevent this, I faced the same issue. Is there a ...

Diverse Range of Exports Available in React Component Library

I have been working on developing a component library consisting of multiple independent components. My objective is to enable users to easily import and use these components in their projects, similar to the following: import One from 'component-lib ...

Exploring Observable Functionality in Angular 6

I've been grappling with understanding Angular Observables, but I've managed to get it working. My goal is to fetch data for my dynamic navigation bar. I successfully verified whether the user is logged in or not and displayed the Login or Logout ...

Skipping necessary module in TypeScript

There are times when I struggle to locate updated type definition files for a new version of a node package I am working with. For instance, I am facing difficulty in finding a recent type definition file for Mongoose. As a result, I encounter errors when ...

Can a dynamic import from a Node module be exported?

I have developed an npm package that utilizes a dynamic import(). This package is written in TypeScript and compiled with the module: "esnext" compiler option, which means the import() call remains unchanged in the output. The expectation was to load this ...

Show the attribute of an element in a pop-up window

I have a modal from ngx-bootstrap that I want to display in there a property of my object let's say the name: public students = [ { id: 1, name: 'lorem'} In this button that is common for all entries in the table (each row has this butt ...