Utilizing Typescript generics with an optional second parameter

Question

Utilizing Typescript generics with an optional second parameter

Learning about generics in typescript has been quite challenging for me. However, I was able to make it work successfully.

export type Events = {
  LOGIN: undefined
  NAVIGATION: {
    screen: string
  }
  SUPPORT: {
    communication_method: 'chat' | 'email' | 'phone'
  }
}

export function trackEvent<K extends keyof Events>(eventName: K, eventValues: Events[K]) {
  if (Platform.OS === 'web') return
  logEvent(eventName, eventValues ?? {})
}

trackEvent('LOGIN', undefined) // no TS error
// is there a way to make this work with just trackEvent('LOGIN') 

trackEvent('SUPPORT') // 👍 TS error because missing 2nd argument
trackEvent('SUPPORT', { communication_method: 'chat' }) // TS helps writing this

However, I am wondering if there is a method to have trackEvent('LOGIN') work without any errors and trackEvent('SUPPORT') trigger an error?

typescript typescript-generics

Answer 1

Answer №1

A handy technique is using a rest parameter. When the data type of Events[K] is undefined, the rest parameter's type translates to an empty tuple. This empty tuple restricts any extra arguments from being passed into the function. If you still want the option to pass undefined, you can consider using [undefined?].

export function trackEvent<K extends keyof Events>(
  eventName: K, 
  ...[eventValues]: (Events[K] extends undefined ? [] : [Events[K]])
) {
  if (Platform.OS === 'web') return
  logEvent(eventName, eventValues ?? {})
}

trackEvent('LOGIN', undefined)
//                  ~~~~~~~~~ Expected 1 argument, but received 2

trackEvent('SUPPORT')
//          ~~~~~~~ Expected 2 arguments, but received 1

trackEvent('LOGIN') // 👍
trackEvent('SUPPORT', { communication_method: 'chat' }) // 👍

Playground

Answer 2

A handy technique is using a rest parameter. When the data type of Events[K] is undefined, the rest parameter's type translates to an empty tuple. This empty tuple restricts any extra arguments from being passed into the function. If you still want the option to pass undefined, you can consider using [undefined?].

export function trackEvent<K extends keyof Events>(
  eventName: K, 
  ...[eventValues]: (Events[K] extends undefined ? [] : [Events[K]])
) {
  if (Platform.OS === 'web') return
  logEvent(eventName, eventValues ?? {})
}

trackEvent('LOGIN', undefined)
//                  ~~~~~~~~~ Expected 1 argument, but received 2

trackEvent('SUPPORT')
//          ~~~~~~~ Expected 2 arguments, but received 1

trackEvent('LOGIN') // 👍
trackEvent('SUPPORT', { communication_method: 'chat' }) // 👍

Playground

Utilizing Typescript generics with an optional second parameter

Answer №1

Similar questions

Eliminate the need to input the complete URL every time when making server calls

Are fp-ts and Jest the perfect pairing for testing Option and Either types with ease?

Vue: Storing selected list values in an array

Creating Mongoose models in TypeScript with multiple connections

After the "markerClick" event triggers in Angular2 SebmGoogleMapMarker, the view fails to update

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

Winston logs are unable to function within the Docker Container

The 'books' property cannot be found on the 'client' type

Utilizing getServerSideProps in the new app router (app/blah/page.tsx) for maximum functionality

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

What is the best way to execute a function that retrieves data from a MySQL query and then sends it back as a result in Express.js?

Adding a baseURI to the image src in Angular 5 is causing issues with dynamically loading images

What is the proper way to define the Typescript type of the return value from the dispatch function in a Redux application?

Can we verify if this API response is accurate?

Convert an object to nested JSON in Angular 5

The callback function does not seem to work when using MUI v4 PropFunc

What is the best way to create a memoized function in React?

Eliminating an index from a JSON array using Typescript

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

Unable to add chosen elements to array - Angular material mat select allowing multiple selections