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

Maybe this is what you are trying to achieve.

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

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

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.

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

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();

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

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'); }

Collectives™ on Stack Overflow

Optional object parameter in typescript

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related