![](/style/images/good.png)
![](/style/images/bad.png)
Named parameters in TypeScript - Krzysztof Kwieciński - Medium
source link: https://medium.com/@k.d.kwiecinski/named-parameters-in-typescript-e32c763d2b2e?sk=386593ed9b02cd1f22e7839bebb17c57
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Use Named Parameters in TypeScript
Hacking functions to have named parameters
![Image for post](https://miro.medium.com/max/60/1*IIPv-j7bBfIAveH8SivQlA.jpeg?q=20)
![Image for post](https://miro.medium.com/max/1650/1*IIPv-j7bBfIAveH8SivQlA.jpeg)
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:
![Image for post](https://miro.medium.com/max/60/1*H2NlP8EG_5m2zI20GFUIOA.png?q=20)
We invoke it in the following way:
![Image for post](https://miro.medium.com/max/60/1*MUTEVp6K7kNdA4ZEJH76Rw.png?q=20)
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!
![Image for post](https://miro.medium.com/max/60/1*HqmmAGheaG6MBhylnynObw.png?q=20)
We can mark the parameters c
and d
as optional parameters:
![Image for post](https://miro.medium.com/max/60/1*W02MSvwnjwJq5Amdm-y32g.png?q=20)
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:
![Image for post](https://miro.medium.com/max/60/1*G74qrTgjFuoRWTk9tDdO5Q.png?q=20)
This way, the function works as expected, even if we do not provide the last two parameters:
![Image for post](https://miro.medium.com/max/60/1*F4ZFsrjI78l8ggUdo70klA.png?q=20)
Great! But what if we want to multiply the sum by four? Again, we have to pass all the parameters…
![Image for post](https://miro.medium.com/max/60/1*YYyKEK-TqNd2wB_ouPqhFQ.png?q=20)
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:
![Image for post](https://miro.medium.com/max/60/1*ISUAE8n0wtKOUVtEFOTIjQ.png?q=20)
Now we pass one object instead of four arguments. Moreover, we specify the object’s interface with c
and d
as optional values:
![Image for post](https://miro.medium.com/max/60/1*Nv67MGLPFanIR0rq7RM9Ow.png?q=20)
And now the function’s invocation looks much cleaner:
![Image for post](https://miro.medium.com/max/60/1*My7E0lh3JrSoHSXHOlxxEA.png?q=20)
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!
![Image for post](https://miro.medium.com/max/60/1*LGLZwffFxiWIG5YZnsLMNg.png?q=20)
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 timesless than the original react-datepicker
, which has more than 50 props).
![Image for post](https://miro.medium.com/max/60/1*rOXZmhjGUwWHjRJpQXIAYw.png?q=20)
If we want to test it, we have to mount the component in every single test:
![Image for post](https://miro.medium.com/max/60/1*s6JiPoqdpljDsHrIjAPviw.png?q=20)
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:
![Image for post](https://miro.medium.com/max/60/1*S_D79tPxHjlDDvoyHpAlCQ.png?q=20)
Now mounting the component is really simple and clean:
![Image for post](https://miro.medium.com/max/60/1*YAzJK5txOTzf5yiGgiQu7Q.png?q=20)
That is exactly where the named parameters pattern in TypeScriptreally shines.
Thanks for reading!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK