Using the record key as the index for the function argument type

Question

Using the record key as the index for the function argument type

In my current setup, I have :

const useFormTransform = <T>(
  formValues: T,
  transform: Partial<Record<keyof T, (value: T[keyof T]) => any>>,
) => ...

This is how it's used :

type Line = { id?: string; fromQuantity: number };
const line: Line = { id: 'abc', fromQuantity: 123 };

useFormTransform(
  line,
  {
    id: f => f,
    fromQuantity: f => transformNumber(Number(f)),
  },
);

I am aiming for something like

Record<keyof T as U, (value: U) => any>

in the transform argument so that the value is strictly a number, not string | undefined | number as it currently is, since

typeof line['fromQuantity'] === 'number'

I have tried various approaches but haven't been successful yet.

Appreciate any help! :)

typescript

Answer 1

Answer №1

If you're looking to achieve this using Record, you'll have to create a custom mapped type instead:


const useFormTransform = <T, U extends keyof T>(
  formValues: T,
    transform: {
      [P in keyof T]: (value: T[P]) => T[P]
  },
) => {
    return null!;
}


type Line = { id?: string; fromQuantity: number };
const line: Line = { id: 'abc', fromQuantity: 123 };

useFormTransform(
  line,
  {
    id: f => f,
    fromQuantity: f => f + 1,
  },
);

Check it out in the Playground

Answer 2

If you're looking to achieve this using Record, you'll have to create a custom mapped type instead:


const useFormTransform = <T, U extends keyof T>(
  formValues: T,
    transform: {
      [P in keyof T]: (value: T[P]) => T[P]
  },
) => {
    return null!;
}


type Line = { id?: string; fromQuantity: number };
const line: Line = { id: 'abc', fromQuantity: 123 };

useFormTransform(
  line,
  {
    id: f => f,
    fromQuantity: f => f + 1,
  },
);

Check it out in the Playground

Using the record key as the index for the function argument type

Answer №1

Similar questions

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the

"Silently update the value of an Rxjs Observable without triggering notifications to subscribers

Tips for sending a function as a value within React Context while employing Typescript

`Can you bind ngModel values to make select options searchable?`

"Is it possible to add an entire object to formData in one

Build an Angular wrapper component for the phone textbox functionality

Sharing interfaces and classes between frontend (Angular) and backend development in TypeScript

Difficulties with managing button events in a Vue project

trpc - Invoking a route from within its own code

Retrieve the API output and save the information into an array

Using Vue js and Typescript to automatically scroll to the bottom of a div whenever there are changes in

I'm stuck trying to figure out all the parameters for the MapsPage component in Angular 2

Submit a pdf file created with html2pdf to an S3 bucket using form data

The package import path varies between dynamic code generation and static code generation

Getting the hang of using and translating typescript .tsx files with jsx in React-native

ngFor filter based on user input

Exploring potential arrays within a JSON file using TypeScript

The Children Element in Next.js and React Context with TypeScript is lacking certain properties

Leveraging TypeScript enums in conjunction with React to anticipate a string prop

Dayjs is failing to retrieve the current system time