Applying a generic function to every property of an object in TypeScript to deduce the return value

Question

Applying a generic function to every property of an object in TypeScript to deduce the return value

I'm facing an issue with TypeScript where I need to solve a problem:

type State = {
    alpha: string,
    beta: number
}

const selectors = {
    alpha: (s: State) => s.alpha,
    beta: (s: State) => s.beta
}

function createModifiedSelector<T, S, U>(
  modifyState: (differentState: T) => S,
  selector: (state: S) => U,
) {
  return (differentState: T) => selector(modifyState(differentState));
}

const add2State = (state: any) => {
    return {...state, alpha: "abc", beta: 123}
}

// everything is fine so far
const modifiedAlpha = createModifiedSelector(add2State, selectors.alpha)
console.log(modifiedAlpha({}));

// However, how can I convert the entire selectors object if there are multiple selectors?
function createModifiedSelectorsObj<T, S, R extends typeof selectors>(modifyState: (differentState: T) => S, selectors: R) {
    const result: Record<keyof R, any> = selectors;
    let selectorKey: keyof R;
    for (selectorKey in selectors) {
        result[selectorKey] = createModifiedSelector(modifyState, selectors[selectorKey])
    }
    return result;
}

Link to TS Playground.

In TypeScript, is there a way to provide correct typings for createModifiedSelectorsObj and the return values of the selector functions?

typescript generics types

Answer 1

Answer №1

Here is a method you can use:

function generateModifiedSelectorsObject<T, S, U extends object>(
    modifyState: (customState: T) => S, selectors: { [K in keyof U]: (s: S) => U[K] }) {
    const result = {} as { [K in keyof U]: (t: T) => U[K] };
    let selectorKey: keyof U;
    (Object.keys(selectors) as Array<keyof U>).forEach(<K extends keyof U>(selectorKey: K) =>
        result[selectorKey] = generateModifiedSelector(modifyState, selectors[selectorKey])
    );
    return result;
}

The T and S type parameters stay the same as for a single selector function. Now, however, U is defined as an object type whose keys match those in the selectors parameter and values are the return types of the methods in the selectors object. If selectors has the type

{a: (s: State)=>string, b: (s: State)=>number}

, then U would be {a: string, b: number}.

This makes the type of selectors a mapped type over U. When calling

generateModifiedSelectorsObject()

, the compiler infers the type U from the expression

{[K in keyof U]: (u: S)=>U[K]}

, which simplifies the inference process.

In the function implementation, I specified the type of result to be another mapped type over U, where each method takes input of type T</code instead of <code>S. The initial assignment for result as an empty object

{}</code required a <a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions" rel="nofollow noreferrer">type assertion</a> to ensure compatibility with the expected type.</p>
<p>Instead of using a <code>for...in

loop, I used Object.keys().forEach() for iterating over the selectors because it allowed me to implement a generic callback where selectorKey could be of type K extends keyof U. Since Object.keys(obj) returns string[], I needed to assert the type to indicate that the keys in selectors correspond to keyof U.

The generic callback's implementation type-checks successfully since both sides of the assignment share the type (t: T) => U[K].

Let’s test this method:

const modifiedSelectorsObject = generateModifiedSelectorsObject(customizeState, selectors);
/* const modifiedSelectorsObject: {
    alpha: (t: any) => string;
    beta: (t: any) => number;
} */

The resulting modifiedSelectorsObject is an object containing methods with output matching those of the original selectors, but taking inputs that align with customizeState.

Link to Playground code

Answer 2

Here is a method you can use:

function generateModifiedSelectorsObject<T, S, U extends object>(
    modifyState: (customState: T) => S, selectors: { [K in keyof U]: (s: S) => U[K] }) {
    const result = {} as { [K in keyof U]: (t: T) => U[K] };
    let selectorKey: keyof U;
    (Object.keys(selectors) as Array<keyof U>).forEach(<K extends keyof U>(selectorKey: K) =>
        result[selectorKey] = generateModifiedSelector(modifyState, selectors[selectorKey])
    );
    return result;
}

The T and S type parameters stay the same as for a single selector function. Now, however, U is defined as an object type whose keys match those in the selectors parameter and values are the return types of the methods in the selectors object. If selectors has the type

{a: (s: State)=>string, b: (s: State)=>number}

, then U would be {a: string, b: number}.

This makes the type of selectors a mapped type over U. When calling

generateModifiedSelectorsObject()

, the compiler infers the type U from the expression

{[K in keyof U]: (u: S)=>U[K]}

, which simplifies the inference process.

In the function implementation, I specified the type of result to be another mapped type over U, where each method takes input of type T</code instead of <code>S. The initial assignment for result as an empty object

{}</code required a <a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions" rel="nofollow noreferrer">type assertion</a> to ensure compatibility with the expected type.</p>
<p>Instead of using a <code>for...in

loop, I used Object.keys().forEach() for iterating over the selectors because it allowed me to implement a generic callback where selectorKey could be of type K extends keyof U. Since Object.keys(obj) returns string[], I needed to assert the type to indicate that the keys in selectors correspond to keyof U.

The generic callback's implementation type-checks successfully since both sides of the assignment share the type (t: T) => U[K].

Let’s test this method:

const modifiedSelectorsObject = generateModifiedSelectorsObject(customizeState, selectors);
/* const modifiedSelectorsObject: {
    alpha: (t: any) => string;
    beta: (t: any) => number;
} */

The resulting modifiedSelectorsObject is an object containing methods with output matching those of the original selectors, but taking inputs that align with customizeState.

Link to Playground code

Applying a generic function to every property of an object in TypeScript to deduce the return value

Answer №1

Similar questions

Tips for populating class attributes from an Angular model

Tips for passing a usestate via props using interfaces in TypeScript and react?

What kind of conditions does SonarQube report as being uncovered?

The 'BaseResponse<IavailableParameters[]>' type does not contain the properties 'length', 'pop', etc, which are expected to be present in the 'IavailableParameters[]' type

Typescript polymorphism allows for the ability to create various

Can you effectively leverage a prop interface in React Typescript by combining it with another prop?

Include the request model as a parameter

How can I best declare a reactive variable without a value in Vue 3 using TypeScript?

Enforcing strict type checking in TypeScript with noImplicitAny for undeclared variables

Combining marker, circle, and polygon layers within an Angular 5 environment

"Optimize Your Data with PrimeNG's Table Filtering Feature

React/Ionic: Avoiding SVG rendering using <img/> elements

React: Function is missing a return type declaration. eslint plugin @typescript-eslint urges for explicit function return types

Can you provide an alternative to employing various restriction boundaries in a generic function in Kotlin other than casting?

Enhancing TypeScript with Generic Functions

Updating a specific section of the DOM while altering the URL in Angular 2

Vitest encountered an issue fetching a local file

How can you test the RTK Listener middleware?

Proper method for inserting a value into a string array in a React application using TypeScript

Deleting a key from a type in TypeScript using subtraction type