Function with dynamically typed parameters, in Typescript.

In Typescript, how to create a function that returns the type that itself receives?

If we don’t explicitly set the parameter the function returns an ‘any’ type.
If we set it, the function returns the fixed type in the parameter.

So, how t…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Guilherme Niches

In Typescript, how to create a function that returns the type that itself receives?

  • If we don't explicitly set the parameter the function returns an 'any' type.

  • If we set it, the function returns the fixed type in the parameter.

So, how to handle it? Let's see.

In the below example, we declare a function that receives a parameter and returns the parameter itself. This parameter was not explicitly set, so when we call the function, the returned value has an 'any' type.

example.ts

But, wait... We passed a number as a parameter to our function and this function just returns this parameter, so, the value should be a number, right? Well, unfortunately, the Typescript "doesn't understand" it in this way.

To handle with this, we can use Generics of Typescript.

Generics in Typescript

Okay, so we will use Generics, but what is Generics?

The Typescript documentation explains Generics as:

"(...) being able to create a component that can work on multiple types rather than a single one."

Refactoring the code, our function now received the type variable Type, a kind of variable that works on types rather than values. This Type allow us to capture the type that the user inform. And in this example, we declare this Type as the type of the return of the function.

example.ts

So, if we pass a number to our function it will return a number, if we pass a string it will return a string, if we pass an object with some attributes (like as example above), it will return the object with the typed values. The same goes for array and other types.

Concluding

In this way, our function will apply types regardless of what we pass as a parameter. This allows us to create functions that can be used in different contexts, turning the function more reusable.

It is worth mentioning that, despite this feature of Typescript, it is always interesting to try to be declarative in your typing. So, this is a feature to use with prudence.

References


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Guilherme Niches


Print Share Comment Cite Upload Translate Updates
APA

Guilherme Niches | Sciencx (2022-11-08T14:52:00+00:00) Function with dynamically typed parameters, in Typescript.. Retrieved from https://www.scien.cx/2022/11/08/function-with-dynamically-typed-parameters-in-typescript/

MLA
" » Function with dynamically typed parameters, in Typescript.." Guilherme Niches | Sciencx - Tuesday November 8, 2022, https://www.scien.cx/2022/11/08/function-with-dynamically-typed-parameters-in-typescript/
HARVARD
Guilherme Niches | Sciencx Tuesday November 8, 2022 » Function with dynamically typed parameters, in Typescript.., viewed ,<https://www.scien.cx/2022/11/08/function-with-dynamically-typed-parameters-in-typescript/>
VANCOUVER
Guilherme Niches | Sciencx - » Function with dynamically typed parameters, in Typescript.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/08/function-with-dynamically-typed-parameters-in-typescript/
CHICAGO
" » Function with dynamically typed parameters, in Typescript.." Guilherme Niches | Sciencx - Accessed . https://www.scien.cx/2022/11/08/function-with-dynamically-typed-parameters-in-typescript/
IEEE
" » Function with dynamically typed parameters, in Typescript.." Guilherme Niches | Sciencx [Online]. Available: https://www.scien.cx/2022/11/08/function-with-dynamically-typed-parameters-in-typescript/. [Accessed: ]
rf:citation
» Function with dynamically typed parameters, in Typescript. | Guilherme Niches | Sciencx | https://www.scien.cx/2022/11/08/function-with-dynamically-typed-parameters-in-typescript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.