Using TypeScript generics to define function parameters

Question

Using TypeScript generics to define function parameters

I'm currently working on opening a typescript method that utilizes generics. The scenario involves an object with different methods, each with specified types for function parameters.

const emailTypes = {
  confirmEmail: generateConfirmEmailOptions, // { a: string, b: string;}
  restorePassword: generateRestorePasswordOptions, // { a: string, b: number;}
};

The type with keys from this object:

export type IEmailTypes = typeof emailTypes;

and here is the method itself:

export const getEmailOptions = <T extends keyof IEmailTypes>(emailType: T, emailData: Parameters<IEmailTypes[T]>[0]) =>
  emailTypes[emailType](emailData);

I am encountering an issue specifically with (emailData), and I cannot figure out why. I believed I was following the correct approach by passing the key names to T and then extracting the function parameters based on this key. However, it seems there are discrepancies in types.

My intention is to have TypeScript provide clear guidance on what emailData should be when inputting, for example, confirmEmail into emailType.

If anyone can point out where I might be going wrong, I would greatly appreciate it.

For better clarity, I've included a screenshot.https://i.sstatic.net/imiSA.png

*methods in emailTypes have parameter types

typescript typescript-typings typescript-generics

Answer 1

Answer №1

Take a look at @jcalz's response here.

You're faced with the decision to either compromise type safety by casting, or modify the code to assist the compiler. Check out the suggested changes here:

declare const generateConfirmEmailOptions: (opts: { a: string; b: string }) => void
declare const generateRestorePasswordOptions: (opts: { a: string; b: number }) => void

interface Args {
  confirmEmail: Parameters<typeof generateConfirmEmailOptions>[0]
  restorePassword: Parameters<typeof generateRestorePasswordOptions>[0]
}

type Mapping = { [K in keyof Args]: (opts: Args[K]) => void }

const emailTypes: Mapping = {
  confirmEmail: generateConfirmEmailOptions, 
  restorePassword: generateRestorePasswordOptions, 
};

const getEmailOptions = <K extends keyof Args>(emailType: K, emailData: Args[K]) => {
  const fn = emailTypes[emailType] 
  return fn(emailData);
}

It's unfortunate that there is some code duplication involved, but for now, this seems to be the only completely type-safe approach. We'll have to wait and see what improvements future versions of TypeScript bring.

Answer 2

Take a look at @jcalz's response here.

You're faced with the decision to either compromise type safety by casting, or modify the code to assist the compiler. Check out the suggested changes here:

declare const generateConfirmEmailOptions: (opts: { a: string; b: string }) => void
declare const generateRestorePasswordOptions: (opts: { a: string; b: number }) => void

interface Args {
  confirmEmail: Parameters<typeof generateConfirmEmailOptions>[0]
  restorePassword: Parameters<typeof generateRestorePasswordOptions>[0]
}

type Mapping = { [K in keyof Args]: (opts: Args[K]) => void }

const emailTypes: Mapping = {
  confirmEmail: generateConfirmEmailOptions, 
  restorePassword: generateRestorePasswordOptions, 
};

const getEmailOptions = <K extends keyof Args>(emailType: K, emailData: Args[K]) => {
  const fn = emailTypes[emailType] 
  return fn(emailData);
}

It's unfortunate that there is some code duplication involved, but for now, this seems to be the only completely type-safe approach. We'll have to wait and see what improvements future versions of TypeScript bring.

Using TypeScript generics to define function parameters

Answer №1

Similar questions

The error message "Property <property> is not recognized on the type 'jQueryStatic<HTMLElement>'" is indicating an issue with accessing a specific property within the TypeScript codebase that utilizes Angular CLI, NPM,

What is the best way to generate a dynamically interpolated string in JavaScript?

Error: Cannot access property 'tb' of an undefined value

Is it possible to use the `fill` method to assign a value of type 'number' to a variable of type 'never'?

Preventing Multiple Login Attempts in Angular.js Using Typescript

Exploring URL Parameters in Angular Unit Testing

Adding an interface for an object containing multiple objects requires defining the structure and behavior

Tips for obtaining a variable step size in react-chartjs-2

What is the best way to compile TypeScript files without them being dependent on each other?

Steps for transforming a complex nested object into an observable and extracting specific values

Determining if an item is empty, undefined, or null in Angular: a guide

Guide on integrating angular-schema-form into an Ionic 2.0 project using typescript

Checkbox in Angular FormGroup not triggering touched state

How can Angular 4 manage an object containing other objects most effectively?

Remove an element from an array within objects

The issue arises when IonViewDidLoad fails to retrieve data from the service class in Ionic after the apk file has been generated

Utilizing the NPM package as a JSX Component is prohibited due to type errors

Angular 5 is rendering a div even if there is no content present

Utilize Sequelize's cascade feature within your application

Achieving the incorporation of multiple components within a parent component using Angular 6