Tips for creating a generic that can automatically determine the type based on a function that alters an object

Question

Tips for creating a generic that can automatically determine the type based on a function that alters an object

The expected result on input:

const MOCK_DATA = {
  role: {
    option: 'Founder / CEO',
    text: '',
  },
  content: {
    option: 'Marketing videos',
    text: '',
  },
};

getSurveyData(MOCK_DATA)
// {
//   role: string;
//   content: string;
// }

The expected result on some other input:

const MOCK_DATA2 = {
  position: {
    option: ['Founder / CEO', 'Developer'],
    text: '',
  },
  termsConsent: true,
};

getSurveyData(MOCK_DATA2)
// {
//   position: string;
//   termsConsent: boolean;
// }

The approach I devised does not infer the return type accurately, so how can a generic function be created to correctly infer the return type based on the input value?

The top-level key in the input can be of type

string | object | boolean | number

.

Actual return type:

const surveyData: {
    [x: string]: string | boolean | number;
}

Code:

type FormValues = {
  [key: string]:
    | {
        option: string | string[];
        text: string;
      }
    | boolean
    | string
    | number
};

export const getSurveyData = (formValues: FormValues) => {

  return Object.entries(formValues).reduce(
    (
      prev: {
        [key: string]: string | boolean | number;
      },
      [key, data],
    ) => {
      let value: string | boolean | number = '';

      if (data instanceof Object) {

        if (Array.isArray(data.option)) {
          value = data.option.join(', ');

        } else {
          value = data.option;
        }
      }

      if (typeof data === 'boolean' || typeof data === 'string' || typeof data === 'number') {
        value = data;
      }

      return { ...prev, [key]: value };
    },
    {},
  );
};

Here's TS playground

typescript

Answer 1

Answer №1

Utilizing a mapped type for the return value is achievable. Transform getSurveyData into a generic function (as previously mentioned):

export const getSurveyData = <T extends FormValues>(formValues: T): SurveyData<T>

...and subsequently define SurveyData in a way that inspects each property to determine if the value of a key matches the object type with options and text, returning the type of text (always string) when applicable, or retaining the property's original type otherwise (using a conditional type):

type SurveyData<T extends FormValues> = {
    [Key in keyof T]: T[Key] extends { text: string } ? string : T[Key];
};

An assertion of type (as SurveyData<T>) will be necessitated on the return value inside the implementation logic (which may potentially be refactored to eliminate this need).

By implementing these changes, you can achieve the desired outcomes:

const result1 = getSurveyData(MOCK_DATA);
console.log(result1.content);
//                  ^? (property) content: string
console.log(result1.role);
//                  ^? (property) role: string

const result2 = getSurveyData(MOCK_DATA2);
console.log(result2.position);
//                  ^? (property) position: string
console.log(result2.termsConsent);
//                  ^? (property) termsConsent: boolean

Interactive Example Here

Answer 2

Utilizing a mapped type for the return value is achievable. Transform getSurveyData into a generic function (as previously mentioned):

export const getSurveyData = <T extends FormValues>(formValues: T): SurveyData<T>

...and subsequently define SurveyData in a way that inspects each property to determine if the value of a key matches the object type with options and text, returning the type of text (always string) when applicable, or retaining the property's original type otherwise (using a conditional type):

type SurveyData<T extends FormValues> = {
    [Key in keyof T]: T[Key] extends { text: string } ? string : T[Key];
};

An assertion of type (as SurveyData<T>) will be necessitated on the return value inside the implementation logic (which may potentially be refactored to eliminate this need).

By implementing these changes, you can achieve the desired outcomes:

const result1 = getSurveyData(MOCK_DATA);
console.log(result1.content);
//                  ^? (property) content: string
console.log(result1.role);
//                  ^? (property) role: string

const result2 = getSurveyData(MOCK_DATA2);
console.log(result2.position);
//                  ^? (property) position: string
console.log(result2.termsConsent);
//                  ^? (property) termsConsent: boolean

Interactive Example Here

Answer 3

Answer №2

Explore the power of mapped types along with conditional types.

type SimpleTransform<T> = T extends Record<string, any> ? string : T;

function processData<T extends FormData>(data: T): {[key in keyof T]: SimpleTransform<T[key]>} {
    // Implementation goes here
}

Answer 4

Explore the power of mapped types along with conditional types.

type SimpleTransform<T> = T extends Record<string, any> ? string : T;

function processData<T extends FormData>(data: T): {[key in keyof T]: SimpleTransform<T[key]>} {
    // Implementation goes here
}

Tips for creating a generic that can automatically determine the type based on a function that alters an object

Answer №1

Answer №2

Similar questions

Creating object properties dynamically based on specific conditions

Set the default value for a form control in a select dropdown using Angular

The default behavior of Angular-Keycloak does not include automatically attaching the bearer token to my http requests

The TypeScript error message "Type 'x' cannot be assigned to type 'IntrinsicAttributes & IntrinsicClassAttributes<Class>'" was displayed on the screen

Exploring the differences between MongoDB's ISODate and a string data

Unable to send a function as props to a child component in TypeScript

Include additional information beyond just the user's name, profile picture, and identification number in the NextAuth session

Authentication with Angular 4 and Firebase 2

The Child/Parent arguments in Typescript methods cannot be assigned

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

Removing a row will always result in the deletion of the final row, as the index is returned as

Pay attention to the input field once the hidden attribute is toggled off

EventEmitter asynchronous callback

Ways to retrieve object array values

Utilizing TypeScript with Express.js req.params: A Comprehensive Guide

Error encountered: NextJs could not find the specified module, which includes Typescript and SCSS

An error in typescript involving a "const" assertion and a string array

Do not display large numbers within an HTML card

Node module for Nativescript angular project that enables multi select dropdown or picker functionality

Tips for maintaining a marker at the bottom of the screen while zooming, similar to Google Maps