Create a Typescript function that has an optional object argument containing optional attributes, all of which have default values set

Question

Create a Typescript function that has an optional object argument containing optional attributes, all of which have default values set

Looking for the most elegant Typescript solution for a function with optional parameters.

The function doSomething(num, config?) takes a number and an optional config object with a few optional parameters.

If the config type is defined as { acceptNegative?: boolean, isBig?: boolean }, then these should all be valid calls:

doSomething(num);

doSomething(num, { acceptNegative: true });

doSomething(num, { acceptNegative: true, isBig: false });

In addition, default values should be set for cases where:

User doesn't provide config object => doSomething(num);
User provides incomplete data in config object =>
```
doSomething(num, { acceptNegative: true });
```

Seeking the most elegant implementation for this scenario. Any suggestions?

typescript

Answer 1

Answer №1

To start off, let's define a distinct type for the config parameter:

type Configuration = { enableNegative: boolean; isLarge: boolean };

Considering that you want the config parameter to be optional and allow for passing only some of its required properties, we will utilize the built-in type Partial. This will transform all properties of the provided type into optional ones:

function performTask(number: number, config: Partial<Configuration> = {}) {}

The default value for config will be {}, and in order to set default values for the properties of config, let's establish a default configuration:

const initialConfig: Configuration = {
  enableNegative: false,
  isLarge: false,
};

Within the function implementation, we'll combine initialConfig with config into a single object. It is crucial for initialConfig to precede config, otherwise it would overwrite values from config:

function performTask(number: number, config: Partial<Configuration> = {}) {
  const finalConfig = { ...initialConfig, ...config };

  console.log(finalConfig);
}

Example usage:

let number = 1;
performTask(number);
performTask(number, { enableNegative: true });
performTask(number, { enableNegative: true, isLarge: true });

playground

Answer 2

To start off, let's define a distinct type for the config parameter:

type Configuration = { enableNegative: boolean; isLarge: boolean };

Considering that you want the config parameter to be optional and allow for passing only some of its required properties, we will utilize the built-in type Partial. This will transform all properties of the provided type into optional ones:

function performTask(number: number, config: Partial<Configuration> = {}) {}

The default value for config will be {}, and in order to set default values for the properties of config, let's establish a default configuration:

const initialConfig: Configuration = {
  enableNegative: false,
  isLarge: false,
};

Within the function implementation, we'll combine initialConfig with config into a single object. It is crucial for initialConfig to precede config, otherwise it would overwrite values from config:

function performTask(number: number, config: Partial<Configuration> = {}) {
  const finalConfig = { ...initialConfig, ...config };

  console.log(finalConfig);
}

Example usage:

let number = 1;
performTask(number);
performTask(number, { enableNegative: true });
performTask(number, { enableNegative: true, isLarge: true });

playground

Answer 3

Answer №2

interface Settings {
 allowNegatives?: boolean;
 isLarge?: boolean;
}

function performAction(number: number, settings: Partial<Settings> = {}): void

{ const { allowNegatives = false, isLarge = true } = settings;

// Continue with the rest of your function code

 console.log(`number: ${number}`);
 console.log(`allowNegatives: ${allowNegatives}`);
 console.log(`isLarge: ${isLarge}`);
 }

 // Examples of valid function calls
 performAction(42); // No settings object given, default values are used
 performAction(42, { allowNegatives: true }); 
 // Settings object with allowNegatives provided
 performAction(42, { allowNegatives: true, isLarge: false }); 
 // Settings object with allowNegatives and isLarge provided

Answer 4

interface Settings {
 allowNegatives?: boolean;
 isLarge?: boolean;
}

function performAction(number: number, settings: Partial<Settings> = {}): void

{ const { allowNegatives = false, isLarge = true } = settings;

// Continue with the rest of your function code

 console.log(`number: ${number}`);
 console.log(`allowNegatives: ${allowNegatives}`);
 console.log(`isLarge: ${isLarge}`);
 }

 // Examples of valid function calls
 performAction(42); // No settings object given, default values are used
 performAction(42, { allowNegatives: true }); 
 // Settings object with allowNegatives provided
 performAction(42, { allowNegatives: true, isLarge: false }); 
 // Settings object with allowNegatives and isLarge provided

Create a Typescript function that has an optional object argument containing optional attributes, all of which have default values set

Answer №1

Answer №2

Similar questions

Comparing Redux and MVC models in software architecture

Difficulties setting up TypeScript in Laravel, alongside Vuejs and Inertia

Why isn't my Next.js middleware working properly with TypeScript?

When working with Typescript and React, you may encounter an issue where an element implicitly has an 'any' type because the type 'State' has no index signature. This can lead to

Unable to alter the input data within the LCJS chart

Issue arose while attempting to use Jest on a React Native application integrated with TypeScript (Jest has come across an unforeseen token)

The Angular ResolveFn error states that the inject() function must be invoked within an injection context

Best practices for implementing dual ngFor directives within a single tr element?

Typescript validation of tokens using Azure functions

The process of exporting a singleton instance

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

Updating and Preserving Content in Angular

Configuring the tsconfig outDir will specify where the output files will be stored

Preventing dynamically generated components from reinitializing upon adding a new object

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

Ways to address the Generic Object Injection Sink eslint error (security/detect-object-injection)

The typings for object properties in Typescript

Encountering "Missing requests" error while executing npm run pactTest on PACT.io

Error encountered in Storybook: The value is not iterable (property Symbol(Symbol.iterator) cannot be read)

Utilizing express-session in TypeScript: Incorporating user information into the session