Change the default parameter value when optional parameters are present

Question

Change the default parameter value when optional parameters are present

I am working with a function that has four parameters, where the first parameter is mandatory, the second and third are optional, and the fourth has a default value:

class MyClass {
   static myFunc(param1: string, param2? : string, param3? : string, param4:boolean=true) 
   {
      ...
   }
}

When calling this function, I want to provide a value for the first parameter and override the default boolean value of the fourth parameter. However, simply using

MyClass.myFunc("foo", false)

doesn't work. Should I reconsider the design of the function signature? What is the common practice in TypeScript for handling such scenarios?

javascript typescript

Answer 1

Answer №1

Redefining the order and usage of parameters in your function is recommended.
Consider using param?:type for overloading the function call efficiently.

This approach helps avoid passing unnecessary undefined arguments explicitly.

const func = (a:number, b:boolean = true, c?:string, d?:string) => {
    console.log(a, b, c, d)
}

func(1)
func(1, false)
func(1, false, "Hello")
func(1, false, "Hello", "World")

For your specific situation:

class MyClass {
   static myFunc(param1:string, param2:boolean = true, param3?:string, param4?:string) 
   {
      ...
   }
}

Answer 2

Redefining the order and usage of parameters in your function is recommended.
Consider using param?:type for overloading the function call efficiently.

This approach helps avoid passing unnecessary undefined arguments explicitly.

const func = (a:number, b:boolean = true, c?:string, d?:string) => {
    console.log(a, b, c, d)
}

func(1)
func(1, false)
func(1, false, "Hello")
func(1, false, "Hello", "World")

For your specific situation:

class MyClass {
   static myFunc(param1:string, param2:boolean = true, param3?:string, param4?:string) 
   {
      ...
   }
}

Answer 3

Answer №2

You can achieve the desired API in a few different ways:

Check out this TypeScript Playground link

class MyClass {
  // The method mentioned in your query
  static myFunc (
    param1: string,
    param2?: string,
    param3?: string,
    param4 = true,
  ): void {
    console.log([param1, param2, param3, param4]);
  }

  // Refactored version with reordered parameters
  static myRefactoredFunc (
    param1: string,
    param4 = true,
    param2?: string,
    param3?: string,
  ): void {
    console.log([param1, param2, param3, param4]);
  }
}

// If you can't modify the original class, create a function with custom parameter order 
// that calls the original method internally and returns its result
const myFunc = (
  param1: Parameters<typeof MyClass['myFunc']>[0],
  param4?: Parameters<typeof MyClass['myFunc']>[3],
  param2?: Parameters<typeof MyClass['myFunc']>[1],
  param3?: Parameters<typeof MyClass['myFunc']>[2],
): ReturnType<typeof MyClass['myFunc']> => MyClass.myFunc(param1, param2, param3, param4);

// These three approaches are functionally identical
MyClass.myFunc('foo', undefined, undefined, false);
MyClass.myRefactoredFunc('foo', false);
myFunc('foo', false);

Answer 4

You can achieve the desired API in a few different ways:

Check out this TypeScript Playground link

class MyClass {
  // The method mentioned in your query
  static myFunc (
    param1: string,
    param2?: string,
    param3?: string,
    param4 = true,
  ): void {
    console.log([param1, param2, param3, param4]);
  }

  // Refactored version with reordered parameters
  static myRefactoredFunc (
    param1: string,
    param4 = true,
    param2?: string,
    param3?: string,
  ): void {
    console.log([param1, param2, param3, param4]);
  }
}

// If you can't modify the original class, create a function with custom parameter order 
// that calls the original method internally and returns its result
const myFunc = (
  param1: Parameters<typeof MyClass['myFunc']>[0],
  param4?: Parameters<typeof MyClass['myFunc']>[3],
  param2?: Parameters<typeof MyClass['myFunc']>[1],
  param3?: Parameters<typeof MyClass['myFunc']>[2],
): ReturnType<typeof MyClass['myFunc']> => MyClass.myFunc(param1, param2, param3, param4);

// These three approaches are functionally identical
MyClass.myFunc('foo', undefined, undefined, false);
MyClass.myRefactoredFunc('foo', false);
myFunc('foo', false);

Change the default parameter value when optional parameters are present

Answer №1

Answer №2

Similar questions

Using JQuery to Send Form Data with an Ajax POST Request

Show a Pop-Up When a Key is Pressed

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Typescript Error: TS2339: Unrecognized property 'map' on datatype 'string'

Guide to scraping a website using node.js, ASP, and AJAX

What could be causing my component to not properly redirect to the Movies Page?

What is the best way to locate every object based on its ID?

Dynamic Bootstrap tooltip

When using React Leaflet, the initial object is found to be undefined in a useState scenario while trying to draw

What is the best way to adjust the color of a button element?

A guide on switching out an HTML element with an AJAX response

What could be the reason for the incorrect usage of the "this" value in the jQuery hover event listener when using bind(this)?

Reference loss occurs in Angular Ionic when using @ViewChild

Arranging elements in an array based on two different properties

I am currently working on determining whether a given string is a palindrome or not

Playing audio induces slight delay

Using string interpolation within the onclick event (Ionic 2 + Angular 2)

Utilizing ES6 modules in an Adobe XD extension: A comprehensive guide

Understanding the process of configuring Quasar Language in SSR Mode using route parameters

Error: The default export is not a component compatible with React in the specified page: "/"