Typescript: Functions

Read Time:3 Minute, 33 Second

In this article, we are going learn about How you can use typescript in functions. And How to restrict the function to take different types of values than define parameters. It will be a basic introduction to functions as we go in-depth in this series you will learn so much more about functions such as How you can use Type Aliases or Interface to define custom types for Functions.

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Table of Contents

Functions

Writing function is a piece of cake when you know the JS but it gets a little bit complex in typescript. Don’t worry, we will take every aspect of that. We need to define the types of two things in function Parameters & Return Types.

Parameters

Function parameters are the names listed in the function’s definition. I’ll take an old example that I’ve mentioned before:

Enter fullscreen mode Exit fullscreen mode

Following is an example of the error it will show when you pass the wrong value to the function:

Enter fullscreen mode Exit fullscreen mode

Return Types

Return types matter. Because In typescript there are many return types. For example, you already know boolean, number and string. But the question here is how we defined which type should return from the function. You can do that by the following syntax.

Enter fullscreen mode Exit fullscreen mode

Other Types

void

void represents the return value of functions that don’t return a value. It’s the inferred type any time a function doesn’t have any return statements or doesn’t return any explicit value from those return statements.

Enter fullscreen mode Exit fullscreen mode

never

The never type represents values that are never observed. In a return type, this means that the function throws an exception or terminates the execution of the program.

Enter fullscreen mode Exit fullscreen mode

There are a lot more other types you can take a look at the documentation for further use.

Optional Parameters

When you define parameters, sometimes you don’t need to pass the parameters. So for that, you can add ? next to the parameter as shown in the following code:

Enter fullscreen mode Exit fullscreen mode

Working with Object

In typescript working with objects could make you feel a little weird. Why? You will know why at the end of this section. There are many instances where you can use objects. Let’s look at them one by one-

Passing Object as Parameter

Passing an object as a Parameter could be a little tricky. You need to define the types of each property you are passing as shown in the following code:

Enter fullscreen mode Exit fullscreen mode

Now, what if you want to pass an object with more than these two parameters:

Enter fullscreen mode Exit fullscreen mode

Returning Object from Function

You can return an object through many ways from a function some of them are shown in the following code along with whether is it correct or not.

Enter fullscreen mode Exit fullscreen mode

The above code example might be scary to look at but we can achieve these things with Type Aliases as well. We’ll look at it in the next article.

Wrapping up

In this article, I explained How you can use typescript in functions. And How to restrict the function to take different types of values than define parameters. It will be a basic introduction to functions as we go in-depth in this series you will learn so much more about functions such as How you can use Type Aliases or Interface to define custom types for Functions.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don’t forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don’t hesitate to drop them in the comments below. I’ll see in the next one.

Connect with me

Source: https://dev.to/j471n/typescript-functions-4nkp

WP Ad Inserter plugin for WordPress