Creating TypeScript object properties dynamically based on function arguments

One of my functions takes in a variable number of arguments and creates a new object with a unique hash for each argument.

Can Typescript automatically determine the keys of the resulting object based on the function's arguments?


For instance,

I have a function called createActionType that builds a dictionary:

function createActionType<K extends {} | void>(...type: string[]): Readonly<{ [key: string]: string }> {
    const actions = {};

    type.forEach((item: string) => {
        actions[item] = `${item}/${generateUniqueId()}`;
    });

    return Object.freeze(actions);
};

Using createActionType:

interface ActionTypes {
    MY_ACTION_1, 
    MY_ACTION_2
}

const action = createActionType<ActionTypes>("MY_ACTION_1", "MY_ACTION_2");
/*
 * action contains { MY_ACTION_1: "MY_ACTION_1/0", MY_ACTION_2: "MY_ACTION_2/1" }
 */
action.MY_ACTION_1; // returns "MY_ACTION_1/0"

I want to simplify the process and just make a call to createActionType like this:

const action = createActionType("MY_ACTION_1", "MY_ACTION_2");
action.MY_ACTION_1;  // Intellisense will recognize the properties MY_ACTION_1 and MY_ACTION_2 in action

Answer №1

Discovered a solution utilizing the in keyword

function createActionType<K extends string>(...type: K[]): { [P in K]: string } {
    const actions = {};

    type.forEach((item: string) => {
        actions[item] = `${item}/${generateUniqueId()}`;
    });

    return Object.freeze(actions) as Readonly<{ [P in K]: string }>;
};

By using K as the function's arguments, we can generate an object with keys that hold string literals specified by K.

For further insights: https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#mapped-types

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

Why is it possible for the EXPRESS+EJS template to access CONFIG without explicitly passing it when rendering?

Currently exploring my knowledge of node.js alongside express and the ejs template. As I delved into some code, I stumbled upon the fact that they were able to invoke config in the template without explicitly passing it as a variable during rendering. You ...

Retrieve the Data from Input Fields with Matching Classes and Transmit to a Script Using AJAX Request

I am working on a form that includes multiple input fields: <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="da ...

The 'clientX' property is not recognized on the 'Event' type in Angular2 Directive

When attempting to retrieve the X position of my mouse in an Angular2 Directive using the following code: @HostListener('mousemove', ['$event']) onMousemove(event: Event): void { console.log(event.clientX) } I encountered an error ...

Making modifications to the CSS within an embedded iframe webpage

Assigned with the task of implementing a specific method on a SharePoint 2013 site. Let's dive in. Situation: - Within a page on a SharePoint 2013 site, there is a "content editor" web part that displays a page from the same domain/site collection. T ...

The use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

Is it better to use scale.set() or simply increase the size of the model in Three.js?

When it comes to scaling 3D models in Three.js (or any other 3D renderers), what is considered the best practice? Recently, I encountered a situation where I loaded a model only to realize that its size was too small. In order to adjust the size, I used m ...

Choose a numeric value and then adjust it to display with exactly two decimal places

My goal is to create a code that achieves the following tasks: Add an ID to every nth child Round the number in each nth child to 2 decimal places Prefix the numbers with a pound sign (£) Loop through until all the nth children in a table are processed ...

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Is there a way to either clear an HTML input field of a previous set number when onFocus is triggered or start with an empty field? When salary: null is set in the constructor, a warning appears on page load: Warning: The value prop on input should not ...

Tips for capturing audio in flac codec format using JS/AJAX

Is there a way to record audio in flac codec instead of opus codec? I attempted setting the codec to flac like this: let blob = new Blob(audioChunks,{type: 'audio/ogg; codecs=flac' }); I also tried this: var options = { audioBitsPerSecond : ...

An Iframe lacks the ability to showcase HTML content, unlike a browser which is capable of doing

I'm struggling to get my Iframe to show the html string properly. Here's the content of the string: var='<BODY style="MARGIN: 0px" bgColor=#ffffff marginwidth="0" marginheight="0"> <SCRIPT language=JavaScript> var Caller_User_Ty ...

When a file is modified in Angular, it triggers an error prompting the need to restart the 'npm' service

Whenever I make changes to a file in my Angular application, I encounter the following error: ERROR in ./src/app/@theme/components/auth/index.js Module build failed: Error: ENOENT: no such file or directory, open 'C:\Dev\Ng\ngx-a ...

When combining stores, what sets Mobx.inject apart from Mobx.observer?

As I start integrating my store with mobx, a question arises in my mind. What sets apart the usage of observer(['store'],...) from inject('store')(observer(...))? Upon closer examination, it seems that inject is not reactive. So, what ...

Attempting to bring in an image file into a React component

My attempt to add an image at the top of my file failed, so I am looking for help with importing it. The code I originally tried did not work. The image does not display using the code below <img src={require('../../blogPostImages/' + post.bl ...

Creating a function in TypeScript that returns a string containing a newline character

My goal is to create a function that outputs the text "Hello" followed by "World". However, my current implementation does not seem to be working as expected. export function HelloWorld():string{ return "Hello"+ "\n"+ "W ...

typescript: How to restrict an array's type in a specific order

Is there a way to restrict the types of elements in an array in TypeScript without specifying paradigms? For example, instead of defining arrays as follows: const arr:Array<any> = [] I would like to be able to specify a specific order for the arr ...

When a tooltip inside a button is clicked, the hover effect is passing through to the surrounding parent element

I am facing an issue with a nested tooltip within a button. The problem arises when I try to click on the 'read more' link inside the tooltip popup, intending to go to an article. However, instead of redirecting me to the article, clicking on the ...

Step-by-step guide on deleting an entire row from a PHP webpage

I have removed a row from the database, but now I need to also remove it from the interface on my PHP page. Any suggestions or assistance would be greatly appreciated. Here is a snippet of mypage.php: <tr> <td><?php echo $row[' ...

Adjust the size of the image to fit within the div container following

<div id="homePage" style="position: relative; margin: 0px; width: 320px; height: 420px;"> <img id="userImg" src="images/5.jpg" width="100%" height="100%" onclick="imageClick()" style=" z-index: -1; margin: 0 ...

Expanding Arrays in TypeScript for a particular type

There is a method to extend arrays for any type: declare global { interface Array<T> { remove(elem: T): Array<T>; } } if (!Array.prototype.remove) { Array.prototype.remove = function<T>(this: T[], elem: T): T[] { return thi ...

Select a Date: Input for Date Selection

Is it possible to restrict the selection of certain days using HTML date input validation? Some booking websites have a feature where an interactive calendar only allows users to select specific dates for events, while others are greyed out and cannot be c ...