Optional object parameter in typescript

Question

I am creating a simple function with an object parameter. It accepts openDialog boolean property which decides whether to run another function. I am not defining an interface for it because it is ever going to be a single property. My issue is how do I define it in such a way that I am no longer required to pass an empty object to that function? openDialog is optional so what is the right syntax for making that object optional too?

function renderComponent({ openDialog }: { openDialog?: boolean }) {
  render(
    <Component />
  );

  if (openDialog) clickButton('Import Existing');
}

Typescript complains about renderComponent() with

Expected 1 arguments, but got 0.

It accepts renderComponent({})

I am aware of a default parameter function renderComponent({ openDialog }: { openDialog?: boolean } = {}) { but I am wondering whether there is a different way.

Apan · Accepted Answer · 2021-06-08 02:17:53Z

6

Maybe this is what you are trying to achieve.

function renderComponent(openDialog? : { openDialog?: boolean }) {
    render(
        <Component />
    );

    if (openDialog) clickButton('Import Existing');
}

edited Jun 8, 2021 at 2:17

Apan

132 bronze badges

answered Jun 7, 2021 at 12:24

Mario Sarbinov

1222 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hans · Accepted Answer · 2024-01-23 11:00:49Z

4

Since destructuring a possibly undefined object does not work:

function renderComponent(args?: { openDialog?: boolean }) { 
    // not possible, since type of args is { openDialog?: boolean } | undefined
    const { openDialog } = args;
}

I ended up using a default initialization args = {}:

function renderComponent(args: { openDialog?: boolean } = {}) { 
    // destructuring works now, since type of args is { openDialog?: boolean } | {}
    const { openDialog } = args;
    // you can use openDialog now, which ofc may be undefined if not provided
}

// can be called even without passing an empty object
renderComponent();

Notice, that you don't need the ? after args if you provide a default value.

edited Jan 23, 2024 at 11:00

answered Oct 15, 2022 at 12:01

Hans

1,64420 silver badges22 bronze badges

Comments

Apan · Accepted Answer · 2021-06-07 12:31:52Z

1

That error:

Expected 1 arguments, but got 0.

means that you must pass (one) object as an argument to this function.

If you would't pass openDialog parameter with this code you should call this function like this:

renderComponent({});

If you would have optional argument you should do like this:

function renderComponent(args? : { openDialog?: boolean }) { 
    // your code 
}

renderComponent();

edited Jun 7, 2021 at 12:31

answered Jun 7, 2021 at 12:26

Apan

132 bronze badges

Comments

user22719189 · Accepted Answer · 2023-10-22 12:09:01Z

1

Insert ={} after { openDialog }: { openDialog?: boolean } but inside the parameter parentheses. Completely, it looks like this:

function renderComponent({ openDialog }: { openDialog?: boolean } = {} ) {
    render(
      <Component />
    );
  
    if (openDialog) clickButton('Import Existing');
  }

answered Oct 22, 2023 at 12:09

user22719189

Collectives™ on Stack Overflow

Optional object parameter in typescript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related