Generating Optional Parameters within a Generic Type

Question

Generating Optional Parameters within a Generic Type

Although I haven't fully resolved TypeScript issues on my own, I have encountered the need for generic types with different arguments several times. Due to my limited understanding of this topic, I have decided to ask for assistance. The task at hand seems straightforward:

interface sampleType{
    typeOne: (arg1:number,arg2:customType) => 0 | Promise<any>
    typeTwo: (arg1:string) => 0 | Promise<any>
    typeThree: () => 0 | Promise<any>
}

What I aim to achieve is as follows:

const caseOne:sampleType<number,customType>;
const caseTwo:sampleType<string>;
const caseThree:sampleType;

The generic type "sampleType" requires one type argument.

I would like to implement such a type feature, but I am unsure how to create an optional type. Perhaps using overloading could be a solution, but I have yet to find a way:

type simpleType<T1, T2> = (arg1?: T1, arg2?: T2) => 0 | Promise<any>;;

This summarizes my current dilemma, and I welcome any advice or suggestions on alternative approaches for writing clean TypeScript code.

typescript typescript-generics

Answer 1

Answer №1

When dealing with generics in a general scenario, you have the option to make them optional by setting defaults:

type simpelType<T1 = string | number, T2 = {}> = (arg1?: T1, arg2?: T2) => 0 | Promise<any>;

However, based on the example code provided, it seems like you may be looking for something more along the lines of this approach:

function foo(): 0 | Promise<any>
function foo(x: string): 0 | Promise<any>
function foo<T>(x: number, y: T): 0 | Promise<any>
function foo<T>(x?: string | number, y?: T): 0 | Promise<any> {
  // carry out actions
  return 0
}

foo()           // works fine, matches overload 1
foo('hi')       // works fine, matches overload 2
foo(3, true)    // works fine, matches overload 3 with T being inferred as boolean

foo(3)          // error!
foo('hi', true) // error!

Apologies for any syntax highlighting inconsistencies, as there is a known issue with highlight.js used by Stack Overflow for syntax highlighting.

While the compiler ensures type-safety by selecting a specific overload, within the function body, your code will still need to determine which overload is being used:

function foo(): 0 | Promise<any>
function foo(x: string): 0 | Promise<any>
function foo<T>(x: number, y: T): 0 | Promise<any>
function foo<T>(x?: string | number, y?: T): 0 | Promise<any> {
  if (typeof x === 'number') {
    // indicates you are in overload #3 and y exists
  } else if (typeof x === 'string') {
    // indicates you are in overload #2
  } else { // no arguments
    // indicates overload #1
  }
  return 0
}

Playground link

Answer 2

When dealing with generics in a general scenario, you have the option to make them optional by setting defaults:

type simpelType<T1 = string | number, T2 = {}> = (arg1?: T1, arg2?: T2) => 0 | Promise<any>;

However, based on the example code provided, it seems like you may be looking for something more along the lines of this approach:

function foo(): 0 | Promise<any>
function foo(x: string): 0 | Promise<any>
function foo<T>(x: number, y: T): 0 | Promise<any>
function foo<T>(x?: string | number, y?: T): 0 | Promise<any> {
  // carry out actions
  return 0
}

foo()           // works fine, matches overload 1
foo('hi')       // works fine, matches overload 2
foo(3, true)    // works fine, matches overload 3 with T being inferred as boolean

foo(3)          // error!
foo('hi', true) // error!

Apologies for any syntax highlighting inconsistencies, as there is a known issue with highlight.js used by Stack Overflow for syntax highlighting.

While the compiler ensures type-safety by selecting a specific overload, within the function body, your code will still need to determine which overload is being used:

function foo(): 0 | Promise<any>
function foo(x: string): 0 | Promise<any>
function foo<T>(x: number, y: T): 0 | Promise<any>
function foo<T>(x?: string | number, y?: T): 0 | Promise<any> {
  if (typeof x === 'number') {
    // indicates you are in overload #3 and y exists
  } else if (typeof x === 'string') {
    // indicates you are in overload #2
  } else { // no arguments
    // indicates overload #1
  }
  return 0
}

Playground link

Generating Optional Parameters within a Generic Type

Answer №1

Similar questions

Angular2 (RC5) global variables across the application

The error with removing the form field control in Angular 7 persists

Prevent Ionic 2 hardware back button from triggering default action

I possess an item, but unfortunately, I am only able to save the first object from this possession

How can type annotations be properly incorporated into this TypeScript code using an inline function class?

What is causing me to not receive a 404 error when dealing with an unhandled state?

Organizing Firebase functions: Managing multiple functions and dependencies

Having difficulty retrieving JSON data from a NodeJS server built with Typescript

The Optimal Method for Calculating an SDF for a Triangle Mesh

Learn how to leverage the power of the MongoDB package in Node.js by utilizing TypeScript with a model interface for efficient data

The circular reference error message "Redux Action 'Type alias 'Action' circularly references itself" appears

What is the best way to implement event handling for multi-level components/templates in Angular 5?

Guide to crafting a reply using nestjs exception filters with nestfastify

Retrieve the output of a function in TypeScript

Ending the connection in SignalR upon $destroy

What is the best way to automatically refresh an observable every 30 seconds?

Netlify failing to build CRA due to inability to locate local module for method?

Tips for leveraging ffmpeg in tandem with node.js

Angular2 error: "missing exported member 'bootstrap'"

The error message "Invalid export value for Next.js with TypeScript: 'getStaticProps'" indicates a problem with the entry export value