What is the best way to selectively pass certain values to the args object?

Question

What is the best way to selectively pass certain values to the args object?

Is there a way in TypeScript to pass only one argument into args and have other values be default without using "args = {}" or declaring defaults within the function to avoid issues with intellisense?

function generateBrickPattern (
    wallWidth: number,
    wallHeight: number,
    args = {
  maxBrickWidth: 100,
  maxBrickHeight: 50,
  minBrickWidth:  50,
  minBrickHeight: 25
}) {}

generateBrickPattern(500,500,{maxBrickWidth: 75}) //Preferred

generateBrickPattern(500,500,{maxBrickWidth: 75, 
                              maxBrickHeight: 50,  
                              minBrickWidth:  50,
                              minBrickHeight: 25}) //Not desired

The preferred syntax generates the following error.

Argument of type '{ maxBrickWidth: number; }' is not assignable to parameter of type '{ maxBrickWidth: number; maxBrickHeight: number; minBrickWidth: number; minBrickHeight: number; }...'.

typescript object arguments intellisense args

Answer 1

Answer №1

In order to ensure the last argument's type is defined, you should explicitly declare it instead of relying on TypeScript to infer.

Consider this approach:

interface BrickPatternConfig {
    maxWidth?: number;
    maxHeight?: number;
    minWidth?: number;
    minHeight?: number;
}

function createBrickPattern (
    wallSizeX: number,
    wallSizeY: number,
    settings: BrickPatternConfig = {
      maxWidth: 100,
      maxHeight: 50,
      minWidth: 50,
      minHeight: 25
}) {}

Alternatively, if preferred, you can directly include the configuration inline like so:

function createBrickPattern (
    wallSizeX: number,
    wallSizeY: number,
    options: {
        maxWidth?: number,
        maxHeight?: number,
        minWidth?: number,
        minHeight?: number
    } = {
        maxWidth: 100,
        maxHeight: 50,
        minWidth: 50,
        minHeight: 25
    }) {}

Answer 2

In order to ensure the last argument's type is defined, you should explicitly declare it instead of relying on TypeScript to infer.

Consider this approach:

interface BrickPatternConfig {
    maxWidth?: number;
    maxHeight?: number;
    minWidth?: number;
    minHeight?: number;
}

function createBrickPattern (
    wallSizeX: number,
    wallSizeY: number,
    settings: BrickPatternConfig = {
      maxWidth: 100,
      maxHeight: 50,
      minWidth: 50,
      minHeight: 25
}) {}

Alternatively, if preferred, you can directly include the configuration inline like so:

function createBrickPattern (
    wallSizeX: number,
    wallSizeY: number,
    options: {
        maxWidth?: number,
        maxHeight?: number,
        minWidth?: number,
        minHeight?: number
    } = {
        maxWidth: 100,
        maxHeight: 50,
        minWidth: 50,
        minHeight: 25
    }) {}

Answer 3

Answer №2

To achieve this, one approach is to utilize destructuring args with default values:

function createWallPattern (
    wallLength: number,
    wallHeight: number,
    {
        maxBrickLength: maxBrickLength = 100,
        maxBrickHeight: maxBrickHeight = 50,
        minBrickLength: minBrickLength = 50,
        minBrickHeight: minBrickHeight = 25
    } = {}
) {
    console.log(maxBrickLength);
}

If avoiding destructuring, an alternative method involves merging the provided args with the defaults as follows:

interface WallPatternOptions {
    maxBrickLength: number;
    maxBrickHeight: number;
    minBrickLength: number;
    minBrickHeight: number;
}

function createWallPattern (
    wallLength: number,
    wallHeight: number,
    args: Partial<WallPatternOptions> = {}
) {
    const options: WallPatternOptions = {
        maxBrickLength: 100,
        maxBrickHeight: 50,
        minBrickLength: 50,
        minBrickHeight: 25,
        ...args
    };

    console.log(options.maxBrickLength);
}

Answer 4

To achieve this, one approach is to utilize destructuring args with default values:

function createWallPattern (
    wallLength: number,
    wallHeight: number,
    {
        maxBrickLength: maxBrickLength = 100,
        maxBrickHeight: maxBrickHeight = 50,
        minBrickLength: minBrickLength = 50,
        minBrickHeight: minBrickHeight = 25
    } = {}
) {
    console.log(maxBrickLength);
}

If avoiding destructuring, an alternative method involves merging the provided args with the defaults as follows:

interface WallPatternOptions {
    maxBrickLength: number;
    maxBrickHeight: number;
    minBrickLength: number;
    minBrickHeight: number;
}

function createWallPattern (
    wallLength: number,
    wallHeight: number,
    args: Partial<WallPatternOptions> = {}
) {
    const options: WallPatternOptions = {
        maxBrickLength: 100,
        maxBrickHeight: 50,
        minBrickLength: 50,
        minBrickHeight: 25,
        ...args
    };

    console.log(options.maxBrickLength);
}

What is the best way to selectively pass certain values to the args object?

Answer №1

Answer №2

Similar questions

Implementing a onClick event to change the color of individual icons in a group using Angular

"Classes can be successfully imported in a console environment, however, they encounter issues when

Inefficiency in POST method prevents data transmission to MongoDB

Is it possible for me to include detailed information to a particular attribute of an object?

Having difficulty integrating requireJS and Node's Require in a single TypeScript project

Attempting to connect information to state using an input field that is being iterated over in React

Is the parent component not triggering the function properly?

Refreshing the page causes the Angular/Ionic Singleton instance to be destroyed

Aligning validation schema with file type for synchronization

Needing to utilize the provide() function individually for every service in RC4

Is it possible to use jQuery to set a value for a form control within an Angular component?

Tips for enhancing a TypeScript interface for a React component in (Material-UI) by utilizing styled-components

React: Avoid unnecessary re-rendering of child components caused by a bloated tree structure

Dealing with JSON data in the format of `(Object object)` requires a specific approach

The declaration file for the module 'tailwind-scrollbar' could not be located

Is there a way to receive autocomplete suggestions for sequelize classes that extend the Model class?

Just change "this.array[0]..." in the TypeScript code

What could be causing the error that pops up every time I attempt to execute a git push

Steps for converting TypeScript code to JavaScript using jQuery, without the need for extra libraries or frameworks like NPM

Showcasing an input field once a specific button is pressed in an Angular application