Typescript: Function with Multiple Parameters AND optional Parameter?

Question

I'm currently trying to figure out how to pass multiple parameter inside a function with the "..." operator while also passing an optional parameter with the "?" operator.

The functions' header shall look like this:

public ThisIsAFunction(val_a: string, val_b?: string, ...val_c: string[]) {};

But since for the "..." - operator it is needed to set the parameter as the last one, but the "?" operator also needs to be set as the last item for being able to leave it without an input, it seems like the only option to use it like that would be:

public ThisIsAFunction("Test", undefined, "Test_one", "Test_two", "Test_three");

But is there also a way to use it without the need of writing "undefined" inside the parameter if I don't want to use val_b?

Thanks in Advance!

You can also use null to omit the value. But yes, in case of ambiguity (like calling this function with two string values, for example) second param will be considered a val_b value. That's another reason to use named params btw. — raina77ow
– raina77ow, Commented Jun 25, 2022 at 9:41

Radu Diță · Accepted Answer · 2022-06-25 10:07:18Z

3

There is no way for TS to infer if you wanted to send the optional parameter or use the ...rest approach.

So you are right, that the only approach, without changing the function signature is to type the value yourself. You aren't limited to undefined, you can pass null for instance or any other value that would be neutral for your business logic.

The deeper question is why do you need this ?. There are other approaches that make this more readable.

Another approach would be to declare an interface/or type for the function args and pass them as an object and then use destructuring to get the values out of it.

Something similar to this:

interface ThisIsAFunctionArgs {
 val_a: string;
 val_b?: string;
 rest: string | string[] | undefined
}
public ThisIsAFunction( args: ThisIsAFunctionArgs)

answered Jun 25, 2022 at 10:07

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

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

1 Comment

Cptain_Whitebeard Over a year ago

True. That's a much more beautiful solution! Thank you!

Alexey Perestoronin · Accepted Answer · 2022-06-25 09:38:59Z

1

Try something like this

Typescript Playground Link

function thisIsAFunction({ val_a, val_b }: { val_a: string, val_b?: string }, ...val_c: string[]) {
  console.log(val_a, val_b, val_c);
};

thisIsAFunction({ val_a: "foo" }, "bar", "baz");

answered Jun 25, 2022 at 9:38

Alexey Perestoronin

1664 bronze badges

Collectives™ on Stack Overflow

Typescript: Function with Multiple Parameters AND optional Parameter?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related