Create all possible combinations of function arguments from an interface or object-like type

In my TypeScript project, I have a type (which can also be implemented as an interface) that outlines all the possible handler names for queue message handling, along with the expected data types for each handler.

export type JobDataTypes = {
    'user-handler': {
        firstname: string;
    };
    'calendar-handler': {
        memberId: number;
        appointmentId: number;
    };
};

Now, I am looking to create a function called 

insertToQueue(jobType: keyof JobDataTypes, data) => void
that will only accept the correct data type based on the provided jobType from the JobDataTypes type above. Since I need this functionality in multiple places and don't want to hardcode it, how could I implement a type InsertToQueueParams in order to achieve this goal?

typescripttyping

Answer №1

This scenario appears to be a perfect fit for utilizing generics.

function addToList<
  T extends keyof ItemTypes
>(itemType: T, itemData: ItemTypes[T]){}

The generic type T can serve as a placeholder for the keyof ItemTypes that is provided through the itemType parameter. This enables us to specify the type of the itemData using ItemTypes[T].

addToQueue("user-item", { name: "John" })
addToQueue("product-item", { id: 123, price: 50 })
addToQueue("product-item", { name: "Book" }) // This will throw an error

Interactive Playground

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

Is there a more efficient way to write the code below using MergeMap or FlatMap or other rxJs operators?

I have a situation where I have two observable pipes and I need to run them one after the other in order to compare their emitted values. The code snippet I attempted is provided below. Ideally, when the first observable emits a value, it should then fet ...

angulartypescriptrxjsngrxrxjs-pipeable-operators

JavaScript function that holds two arguments

I'm in the process of adapting these Redux actions to Vuex. Upon examination, I noticed that the actions have 2 placeholders(I'm unsure of the correct term) for arguments. For illustration purposes, it looks something like this: export const ...

typescriptvuexvuejs3vue-composition-api

Looking to utilize Axios in React to make API calls based on different categories upon clicking - how can I achieve this?

My current issue involves making an API call upon clicking, but all I see in my console is null. My goal is to have different API categories called depending on which item is clicked. const [category, setCategory] = useState(""); useEffect(() => { ...

javascriptreactjstypescriptaxios

The 'zone' property is not recognized on the 'Observable<{}>' data type

I am currently following the meteor-ionic tutorial and encountering a typescript error: typescript: src/pages/details/details.ts, line: 35 Property 'zone' does not exist on type 'Observable<{}>'. This is my componen ...

angulartypescriptmeteorrxjs

Update the sebm-google-map-marker component with the help of an Angular2 directive

Currently, I am utilizing angular2-google-maps to construct a Google map with markers. My goal is to customize a marker by incorporating the user's social media profile picture. To achieve this customization, I plan to refer to the following resource ...

angulartypescriptangular2-directivesangular2-google-maps

Angular and Firestore, when combined, present a unique challenge as the queries

After upgrading the code of an outdated project to the latest versions of Angular and RxJs, I made every effort to update the code as thoroughly as possible. Here is a link to my previous code However, I am now encountering the issue of receiving undefin ...

angulartypescriptfirebaserxjs

The setupFile defined in Jest's setupFilesAfterEnv configuration is not recognized by the VSCode IDE unless the editor is actively open

I've put together a simplified repository where you can find the issue replicated. Feel free to give it a try: https://github.com/Danielvandervelden/jest-error-minimal-repro Disclaimer: I have only tested this in VSCode. I'm encountering diffic ...

reactjstypescriptjestjsjest-dom

Create a constant object interface definition

Is there a way to create an interface for an object defined with the as const syntax? The Events type does not work as intended and causes issues with enforcement. const events = { // how can I define an interface for the events object? test: payload ...

typescript

The type 'argument with {error: null, complete: null, next: (data: Object) => void}' cannot be assigned

Having trouble with setting up web sockets. The code I have below is not compiling in TypeScript: let observer = { error: null, complete: null, next: (data: Object) => { console.log('Message sent to websocket: ', data); ...

angulartypescriptwebsocket

Consider the potential for receiving an undefined return when a default value is not specified

I developed a React hook that makes a request to a remote API and returns a value. By default, when the API is fetching, the returned value is set to undefined. However, I added a new option that allows for setting a default value - so if the API is still ...

typescript

Show the string representation of the enum instead of its numerical value

Can someone help me with this issue? I am trying to retrieve the role using get role(): string but it's not returning the full role name. For example, instead of getting "Head Administrator", I only get "Administrator" returned. I know that Role["Admi ...

typescriptangular12

best typescript configuration for node 8 suggested

When configuring TypeScript for use with Node 8, what is the optimal setup? Many tutorials recommend using the following tsconfig.json: { "compilerOptions": { "target": "es6", "module": "commonjs" } } However, it has come to my attention tha ...

node.jstypescript

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

In my code, I am taking a raw Markdown string stored in 'markdownString' and using the marked.js library to convert it to HTML for display on a web browser. My goal is to extract all plain text values from the page and store them in an array of s ...

htmlnode.jstypescriptdomdomparser

Error encountered during TypeScript execution - 'undefined'

I'm encountering errors while trying to instantiate a basic class named Point using HTML and TypeScript. Whenever I click on the hyperlink, I receive the following error messages within each try/catch block: Errors: Cannot read property 'Empty ...

javascript.netruntime-errortypescript

Leverage glob patterns within TypeScript declaration files

Utilizing the file-loader webpack plugin allows for the conversion of media imports into their URLs. For example, in import src from './image.png', the variable src is treated as a string. To inform TypeScript about this behavior, one can create ...

typescriptwebpackglobtsconfigwebpack-file-loader

What could be the reason for the following error message: "ERROR TypeError: Unable to access 'controls' property of an undefined object"?

Currently, I am attempting to follow a tutorial from Pluralsight but have encountered an issue that has left me stumped. Strangely enough, the application is functioning correctly; however, I keep seeing an error pop up in my console. I've taken it u ...

angulartypescripttemplatebinding

When employing the caret symbol (^) in package.json, it fails to update the minor version

Within my package.json file, there is a line that reads as follows: "typescript": "^4.1.6", The presence of the caret (^) symbol indicates that npm should install a version of TypeScript above 4.1 if available. However, upon checking ...

node.jstypescriptnpm

An error in Typescript is indicating that a semicolon is expected. The identifier 'EventNameString' is currently being used as a value, even though it only refers to a type

I've been working on integrating Firebase phone authentication into an older Ionic project and have followed several tutorials. I was able to successfully implement it, but whenever I run ionic serve -l, I encounter the following error: Interestingly ...

angulartypescriptfirebaseionic-framework

How should I properly initialize my numeric variable in Vue.js 3?

Encountering an issue with Vue 3 where the error message reads: Type 'null' is not assignable to type 'number'. The problematic code snippet looks like this: interface ComponentState { heroSelected: number; } export default define ...

javascripttypescriptvue.jstypesvuejs3

A guide to setting properties using a Proxy object

Within my class, I have included a Proxy which is structured as follows: export class Row<T extends ModelItems> { private _row: T = <T>{} public constructor(rowItems?: T) { if (rowItems) { this._row = rowItems } return new Proxy( ...

javascripttypescript