Retrieve TypeScript types from a function and assign them to an object

Seeking a way to automatically generate types based on given function types. I want to extract the return type directly from the function and map it to the key of the object as shown below. I attempted using ReturnType but encountered issues with the reducers structure.

type A = { a: string } 
type B = {  b: string }
type Reducers = {
  aA: (a) => A,
  bB:(b) => B,
}

const reducers: Reducers = {
  aA: (a) => { a },
  bB: (b) => {b },
}

Any suggestions on how to retrieve the store state?

namespace Store {  // I will provide this
  type Project = { // here is where I need to generated types based on reducer function like`type Project = ....`
     aA: A,
     bB: B,
  } 
}

Answer №1

Not quite sure what you're looking for, but here's a guide on how to implement ReturnType within a mapped type:

type Project = {
  [K in keyof Reducers]: ReturnType<Reducers[K]>
}

Alternatively, a more general approach would be:

interface ReducerDict {
  [key: string]: (...args: any[]) => any
}

type Project<T extends ReducerDict> = {
  [K in keyof T]: ReturnType<T[K]>
}

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 TypeScript's Conditional Types

Consider this scenario: type TypeMapping = { Boolean: boolean, String: string, Number: number, ArrayOfString: Array<string>, ArrayOfBoolean: Array<boolean> } export interface ElemType { foo: keyof TypeMapping, default: valueof T ...

Having difficulty initializing a constant object in TypeScript

Encountering an error while attempting to compile my code using Angular 7.2.0 and TypeScript version 3.2.2: Error TS1005: ',' expected.**… The issue seems to be arising from the line where I am trying to define a const object. addAppareil( ...

Is there another method to activate a button dynamically if the Router Link Active is not functioning in the given scenario?

Snippet of HTML code <div class="card-header"> <h5>Refill by date</h5> <div class="card-header-right"> <nav class="navbar bg-faded "> <ul class="nav navbar-nav"> <li class="nav-item" routerLinkA ...

How can you resolve the error message "No overload matches this call." while implementing passport.serializeUser()?

Currently, I am working on implementing passport.serializeUser using TypeScript. passport.serializeUser((user: User, done) => { done(null, user.id) }); The issue I am encountering is as follows: No overload matches this call. Overload 1 of 2, &ap ...

Determine the route path during the ongoing navigation event in Angular 8 using NavigationStart

Looking for a way to retrieve the router path during a NavigationStart event in Angular 8 this.router.events .pipe(filter(event => event instanceof NavigationStart)) .subscribe((event: NavigationStart) => { // need help gett ...

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

How can I restrict the highest possible date selection in reactjs?

I am working on a project that requires users to select dates using datetime-local, but I want to limit the selection to only three months ahead of the current date. Unfortunately, my current implementation is not working as expected. Any assistance woul ...

Organize nested tuples and maintain their sequence

I am attempting to achieve a functionality similar to the following: type Type = object; type TypeTuple = readonly Type[]; function flattenTuples<T extends readonly (Type | TypeTuple)[], R = Flatten<T>>(...tuples: T): R { // code to flatten ...

describing a schema for a mongoose model in a TypeScript environment

I am currently working on a function named createFactory, which requires two parameters - a model and a data object. The purpose of this function is to generate a document based on the provided data. const createFactory = (Model, obj: object) => { M ...

Common mistakes made while working with decorators in Visual Studio Code

Having trouble compiling TypeScript to JavaScript when using decorators. A persistent error message I encounter is: app.ts:11:7 - error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the ' ...

Angular : How can a single item be transferred from an array list to another service using Angular services?

How to Transfer a Single List Item to the Cart? I'm working on an Angular web application and I need help with transferring a single item from one service to another service and also displaying it in a different component. While I have successfully i ...

Unable to employ the .some() method with an array consisting of objects

I am currently attempting to determine whether my array of objects contains an attribute with a specific value. I wanted to use the array.some() method instead of a foreach loop, but I keep encountering an error: Error TS2345: Argument of type '(ele ...

Alter text within a string situated between two distinct characters

I have the following sentence with embedded links that I want to format: text = "Lorem ipsum dolor sit amet, [Link 1|www.example1.com] sadipscing elitr, sed diam nonumy [Link 2|www.example2.com] tempor invidunt ut labore et [Link 3|www.example3.com] m ...

Transfer a segment of template from one angular 4 component to another

Essentially, in the template of component 1, I have something like this: <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> Then in the template ...

The error message "Type 'IPromise<{}>' is not compatible with type 'IPromise<TemplatesPagingModel>' in typescript version 2.8.0" is displayed

Currently, I am working on an AngularJS framework (version 1.5.8) with the latest TypeScript files (version 2.8.0). However, after updating to the most recent TypeScript version, the code below is not compiling. Implementation of Angular interface: inter ...

What is the best way to tally up the letters within a table?

Currently, I am working on a task to count letters and display them in a table. The existing table is functional but has too many rows and incorrect counts. A 2 ...

Utilizing the output of one function as an input parameter for another function: A guide

Having this specific shape const shape = { foo: () => 'hi', bar: (arg) => typeof arg === 'string' // argument is expected to be a string because foo returns a string } Is there a way to connect the return type of foo to the ...

There is no varying factor between the platforms when utilizing ionic 3

My initial attempt at trying ionic 3 has been met with some challenges. When I launch the application using either the ionic lab or ionic serve command, the platforms displayed in the browser show the same views for every device (iOS, Android, Windows). H ...

Steps for Properly Defining Next.js getServerSideProps as a Function Declaration

I've been working on implementing getServerSideProps (additional information available here, and detailed API documentation here), but my challenge lies in utilizing it as a function declaration instead of an expression. Despite searching for relevant ...

Issue with typescript: "Property not found in void type"

So, I've stumbled upon some code I created using Angular Bootstrap for a date picker within an event registration form (where you click new to create a new event). The objective is for the user to select a date and save it. Here's the code snippe ...