Creating a TypeScript function definition that adapts dynamically based on the input functions

Question

Creating a TypeScript function definition that adapts dynamically based on the input functions

Is it feasible to alter the type of something depending on the value of an argument passed to a function? I am in need of this specific type for an event emitter with callback. For instance:

interface IUser {
  name: string
}

type CallbackType = /* A dynamic Type for the Callback */

// Type for CallBack should be (user: IUser) => any when used for event1
use("event1", (user) => { /* Verify that event1 is utilized, and add only 1 argument to the callback type  */ })

// Type for CallBack should be (email: string, password: string) => any when used for event2
use("event2", (email, password) => { /* Confirm that event2 is utilized, and include 2 arguments in the callback type */ })

Therefore, is there a method to determine which event is being used and assign the appropriate type to the callback?

typescript types typescript-typings

Answer 1

Answer №1

The most straightforward approach is to utilize overloads.


type Callbacks = {
  (name: "event1", cb: (u: IUser) => void): void
  (name: "event2", cb: (email:string, pass: string) => void): void
}

let use: Callbacks = null!;
//for event1 the type Callbacks should be (user: IUser) => any
use("event1", (user) => { /* verify that event1 is used, therefore only add 1 argument to the callback type */ })

//for event2 the type Callbacks should be (email: string, password: string) => any
use("event2", (email, password) => { /* verify that event2 is used, hence add 2 arguments to the callback type */ })

Playground Link

For more complex scenarios, like having callbacks in another type or intricate conditions, you may want to consider tuples in rest parameters and conditional types. However, based on your question, that would likely be excessive.

Answer 2

The most straightforward approach is to utilize overloads.


type Callbacks = {
  (name: "event1", cb: (u: IUser) => void): void
  (name: "event2", cb: (email:string, pass: string) => void): void
}

let use: Callbacks = null!;
//for event1 the type Callbacks should be (user: IUser) => any
use("event1", (user) => { /* verify that event1 is used, therefore only add 1 argument to the callback type */ })

//for event2 the type Callbacks should be (email: string, password: string) => any
use("event2", (email, password) => { /* verify that event2 is used, hence add 2 arguments to the callback type */ })

Playground Link

For more complex scenarios, like having callbacks in another type or intricate conditions, you may want to consider tuples in rest parameters and conditional types. However, based on your question, that would likely be excessive.

Answer 3

Answer №2

Below is an example showing how to use types in TypeScript:

type CallBackEvent1 = (event: "event1", cb: (user: IUser) => void) => void;
type CallBackEvent2 = (
  event: "event2",
  cb: (email: string, pass: string) => void
) => void;

type CallBack = CallBackEvent1 | CallBackEvent2;

const callBack1: CallBack = (event: "event1", cb: (user: IUser) => void) =>
  undefined;
const callBack2: CallBack = (
  event: "event2",
  cb: (email: string, pass: string) => void
) => undefined;

const wrongCallBack: CallBack = (event: "event2", cb: (user: IUser) => void) =>
  undefined;
// Type '(event: "event2", cb: (user: IUser) => void) => undefined' is not assignable to type 'CallBack'.
//   Type '(event: "event2", cb: (user: IUser) => void) => undefined' is not assignable to type 'CallBackEvent1'.
//     Types of parameters 'event' and 'event' are incompatible.
//       Type '"event1"' is not assignable to type '"event2"'.ts(2322)

Answer 4

Below is an example showing how to use types in TypeScript:

type CallBackEvent1 = (event: "event1", cb: (user: IUser) => void) => void;
type CallBackEvent2 = (
  event: "event2",
  cb: (email: string, pass: string) => void
) => void;

type CallBack = CallBackEvent1 | CallBackEvent2;

const callBack1: CallBack = (event: "event1", cb: (user: IUser) => void) =>
  undefined;
const callBack2: CallBack = (
  event: "event2",
  cb: (email: string, pass: string) => void
) => undefined;

const wrongCallBack: CallBack = (event: "event2", cb: (user: IUser) => void) =>
  undefined;
// Type '(event: "event2", cb: (user: IUser) => void) => undefined' is not assignable to type 'CallBack'.
//   Type '(event: "event2", cb: (user: IUser) => void) => undefined' is not assignable to type 'CallBackEvent1'.
//     Types of parameters 'event' and 'event' are incompatible.
//       Type '"event1"' is not assignable to type '"event2"'.ts(2322)

Creating a TypeScript function definition that adapts dynamically based on the input functions

Answer №1

Answer №2

Similar questions

Creating TypeScript modules for npm

The attempt to combine an array of elements with another array using FieldValue.arrayUnion() in Firestore was unsuccessful

Issue with Angular2-Meteor application: unable to establish connection with MySQL database through Meteor framework

React-query v5 - Updating or fetching outdated query

Avoid automatic restart of NestJS server upon modifying specific directories

Tips for integrating personalized arrow buttons into Alice-Carousel

Create a TypeScript array of objects that mirrors a Java List<Map<String, String>>

Hiding the line connector between data points in ChartJs

Publishing Typescript to NPM without including any JavaScript files

Displaying inner arrays in an Angular2 MatTable

Can a type be referenced using the generic name?

When implementing Angular 6, using a shared module within individual lazy-loaded modules can lead to a malfunctioning app when changes are

What is the best way to transfer the API Response Time from one Fetch function to a separate asynchronous function?

Having trouble getting React app to recognize Sass properly

When conducting Angular testing using Karma and Jasmine, a method that makes use of HttpClient.get may result in undefined values in the service spec. However, it successfully

struggling to access the value of [(ngModel)] within Angular 6 component

Data is not displaying correctly in the Angular Material Table

Getting into a dynamic named property inside another object in angular can be achieved by utilizing bracket notation

Component fails to navigate to the page of another component

Having trouble resolving TypeScript TS2322 error with Context API + useState hook in your React App?