How to Use Named Parameters in TypeScript
Hacking functions to have named parameters
Even though there is technically no such thing as a named parameter in TypeScript (or JavaScript), the language offers a syntax that makes it possible to use a very similar functionality!
Named arguments make life much easier. They allow you to play with function arguments almost like you play with letters in Scrabble. You can pass any argument in whatever order you want just by specifying its name.
Or if you’d prefer a more formal definition:
“[A named parameter is a] computer language’s support for function calls that clearly state the name of each parameter within the function call.” — Wikipedia
Some programming languages (e.g. Kotlin/Python/C#) support this functionality out of the box. In TypeScript, we can emulate this behavior. In this article, you will learn how!
Why Do We Need Named Parameters?
Imagine we have a function:
We invoke it in the following way:
But what if we just want to get a sum a + b? We have to call it with all the parameters, even though the last two do not matter!
We can mark the parameters c and d as optional parameters:
But then the function’s implementation needs some changes in order to work properly (handling of undefined values).
There is a better solution, though: We can use default parameters:
This way, the function works as expected, even if we do not provide the last two parameters:
Great! But what if we want to multiply the sum by four? Again, we have to pass all the parameters…
Can we do better? Sure we can, with some help from “named parameters.”
How to Use Them
Let’s just modify the last function signature’s code snippet:
Now we pass one object instead of four arguments. Moreover, we specify the object’s interface with c and d as optional values:
And now the function’s invocation looks much cleaner:
We specify parameters by name. It makes code a bit more verbose but much more flexible.
Let’s recall the example of multiplying by four. Now it’s really easy!
Real-Life Example (React + Jest)
You might be wondering where such functionality can be useful. I use it often for testing React components.
It is pretty common that library components take a lot of optional props. Imagine we have our own implementation of a DatePicker component that takes four props (ten times less than the original react-datepicker, which has more than 50 props).
If we want to test it, we have to mount the component in every single test:
Luckily, we have just learned what the named parameters are.
To keep our code DRY, we can extract a function taking one object with optional values:
Now mounting the component is really simple and clean:
That is exactly where the named parameters pattern in TypeScript really shines.
Thanks for reading!
