How can we create a versatile Action type in typescript that can accommodate varying numbers of arguments and argument types?

Question

How can we create a versatile Action type in typescript that can accommodate varying numbers of arguments and argument types?

When working with Typescript, encountering a duplicate type error can be frustrating. For instance, consider the following code snippet:

export type Action<T> = (arg:T) => void
export type Action<T1,T2> = (arg1:T1, arg2:T2) => void

How can we define a generic Action type similar to .net that allows for a variable number of arguments, each with a different type?

One potential solution I have come across is described below:

export type Action1<T> = (arg:T) => void
export type Action2<T1,T2> = (arg1:T1, arg2:T2) => void

typescript

Answer 1

Answer №1

It's quite common to see this type being represented with a single parameter (typically an array) rather than using multiple parameters.

For example:

type Operation<TArgs extends Array<any>> = (...args: TArgs) => void;

function performTask(a: string, b: number) {
  // ...
}

const operation: Operation<[string, number]> = performTask;

However, it is also not uncommon for developers to simply declare the type explicitly:

const task: (s: string, n: number) => void = performTask;

Rather than using

Operation<[string, number]>

.

Answer 2

It's quite common to see this type being represented with a single parameter (typically an array) rather than using multiple parameters.

For example:

type Operation<TArgs extends Array<any>> = (...args: TArgs) => void;

function performTask(a: string, b: number) {
  // ...
}

const operation: Operation<[string, number]> = performTask;

However, it is also not uncommon for developers to simply declare the type explicitly:

const task: (s: string, n: number) => void = performTask;

Rather than using

Operation<[string, number]>

.

How can we create a versatile Action type in typescript that can accommodate varying numbers of arguments and argument types?

Answer №1

Similar questions

Error: The current call does not match any existing overloads - TypeScript, NextJS, styled-components

What could be causing the conditional div to malfunction in Angular?

Can a TypeScript interface inherit from multiple other interfaces simultaneously?

Employing monaco-editor alongside typescript without webpack within an electron endeavor

Managing input and output using a collaborative service

Enforcing strict property validation on variables passed into TypeScript functions

Using TypeScript to retrieve a strongly typed promiseValue from an angular $modalInstanceA

When making a variable call outside of a subscriber function, the returned value is 'undefined'

Is there a way for me to receive the status code response from my backend server?

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

What types of modifications do ViewChildren and ContentChildren QueryLists keep an eye out for?

Is it possible for React props to include bespoke classes?

Tips for modifying the UserRepresentation in keycloak REST API response

What is the best way to set the first option in a mat-select to be

How can TypeScript objects be serialized?

Exploring dependency injection in Angular 1 using a blend of JavaScript and TypeScript

Tips for efficiently utilizing Hooks with React Context:

A guide on incorporating unique font weights into Material UI

Creating a personalized aggregation function in a MySQL query

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?