Using Typescript to transform a list into function arguments

Question

Using Typescript to transform a list into function arguments

My current challenge involves a set of arguments structured like so:

const args: FeatureEventArg[] = [
  {
    name: 'username',
    type: 'string',
  },
  {
    name: 'message',
    type: 'string',
  },
  {
    name: 'totalMessagesSent',
    type: 'number',
  },
];

The objective is to transform this list using some type, possibly

FeatreEventArgs<typeof args>

, in order to generate arguments for a callback function that resembles the following:

function callback(username: string, message: string, totalMessagesSent: number) {
  // Other stuff
}

I have managed to tackle the types aspect through various adjustments and enhancements such as

extends "string" ? string

. However, I am encountering difficulty with the names which currently present as arg_0 instead of the specified names within the object.

If you have any recommendations, suggestions, or alternative solutions to address this issue, please feel free to share your insights. Thank you!

typescript types typescript-typings

Answer 1

Answer №1

To maintain the exact string types, it is necessary to eliminate the : FeatureEventArg[] and instead treat the array of objects as const. By doing so, you can iterate over the [number] values in the array, extracting the name as the key and the type as the value using a helper type that converts the string into the corresponding type.

const args = [
  {
    name: 'username',
    type: 'string',
  },
  {
    name: 'message',
    type: 'string',
  },
  {
    name: 'totalMessagesSent',
    type: 'number',
  },
] as const;
type Args = typeof args;
type ToPrimitive<T> =
    T extends 'string' ? string
  : T extends 'number' ? number
  : never;

type ArgsObj = {
  [T in Args[number] as T["name"]]: ToPrimitive<T["type"]>
}

Answer 2

To maintain the exact string types, it is necessary to eliminate the : FeatureEventArg[] and instead treat the array of objects as const. By doing so, you can iterate over the [number] values in the array, extracting the name as the key and the type as the value using a helper type that converts the string into the corresponding type.

const args = [
  {
    name: 'username',
    type: 'string',
  },
  {
    name: 'message',
    type: 'string',
  },
  {
    name: 'totalMessagesSent',
    type: 'number',
  },
] as const;
type Args = typeof args;
type ToPrimitive<T> =
    T extends 'string' ? string
  : T extends 'number' ? number
  : never;

type ArgsObj = {
  [T in Args[number] as T["name"]]: ToPrimitive<T["type"]>
}

Using Typescript to transform a list into function arguments

Answer №1

Similar questions

Encountering challenges while transitioning from ngrx version 2 to version 4, specifically related to typing in array de-structuring

How can you prevent the keys from being read-only when mapping onto a type?

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or

Steps to fix the issue of 'Property 'foo' lacks an initializer and is not definitely assigned in the constructor' while utilizing the @Input decorator

"Launching" conduit for Observable

What are the drawbacks of introducing a dependency within the constructor?

What kind of function possesses additional attributes or characteristics?

The sticky navbar fails to stay in place when the content becomes too lengthy

A foundational NodeJS program in TypeScript featuring a structured client-utility-definition setup with adherence to stringent coding guidelines

Can a constant be utilized as the property name within routerLink when specifying queryParams?

Guide to configuring a function to display the maximum value on a boxplot in Highcharts

A guide on creating a concatenation function using TypeScript

tips for concealing a row in the mui data grid

Creating a View-Model for a header bar: A step-by-step guide

Exploring the integration of LeafLet into Next JS 13 for interactive mapping

Guide on inputting Vue component in props

Transmitting data from Angular to .NET Core for seamless integration

What is the correct way to properly enter a Svelte component instance variable?

Solving automatically generated TypeScript MongoDB types for GraphQL results

Transforming a string into key-value pairs using Typescript