Functions in TypeScript

Functions

Functions are the fundamental building block of any applications in JavaScript. They’re how you build up layers of abstraction, mimicking classes, information hiding, and modules.

In TypeScript, while there are classes and modules, function still play the key role in describing how to ‘do’ things. TypeScript also adds some new capabilities to the standard JavaScript functions to make them easier to work with.

There are mainly four ways how you can define a function in TypeScript and they are : Named Functions, Anonymous Functions, Lambda Functions and Class Functions.

1. Named Functions

Actually this is similar to the function which we write in JavaScript. The only difference which you can find between Named TypeScript functions and Named JavaScript function is that, here we have a type on the parameter passed.The importance of having a type on the parameter is that you will only pass a parameter of that type (string in our case) when calling the function.

2. Anonymous Functions

The function is pretty much same to the Named Functions but here we will not be giving any name to thefunction. We will assign the function to a variable (square in our case). If we need to call the function we can simply write square(2). In our example below we are even assigning the return type of the function that is number.

To quickly recap what these two approaches look like in JavaScript:

3. Lambda functions

This function might be new to JavaScript developers, but it is not new to C# developers. Lets take an example to know about Lambda Functions.

var square = (a : number) => a * a; This is a actually a lambda function, where (a : number) is an inlineparameter, (=>) is a lambda operator and (a * a) is the body of the function. When the above TypeScript code compiles it will give the below JavaScript code.

var square =function(a) { return a*a; }; Thus it is so easy to write a Lambda Function.

4. Class functions

This function is added inside a Class. The difference between the normal JavaScript functions and the functionswritten inside a Class is that you need not have to write a keyword ‘function’.

This above code will compile to the JavaScript shown below.

Typing the function

Let’s add types to our simple examples from earlier:

We can add types to each of the parameters and then to the function itself to add a return type. TypeScript can figure the return type out by looking at the return statements, so we can also optionally leave this off in many cases.

Writing the function type

Now that we’ve typed the function, let’s write the full type of the function out by looking at the each piece of the function type.

A function’s type has the same two parts: the type of the arguments and the return type. When writing out the whole function type, both parts are required. We write out the parameter types just like a parameter list, giving each parameter a name and a type. This name is just to help with readability. We could have instead written:

As long as the parameter types line up, it’s considered a valid type for the function, regardless of the names you give the parameters in the function type.

The second part is the return type. We make it clear which is the return type by using a fat arrow (=>) between the parameters and the return type. As mentioned before, this is a required part of the function type, so if the function doesn’t return a value, you would use ‘void’ instead of leaving it off.

Of note, only the parameters and the return type make up the function type. Captured variables are not reflected in the type. In effect, captured variables are part of the ‘hidden state’ of any function and do not make up its API.

Inferring the types

TypeScript compiler can figure out the type if you have types on one side of the equation but not the other:

This is called ‘contextual typing’, a form of type inference. This helps cut down on the amount of effort to keep your program typed.

Conclusion:

I hope you have understood the main purpose of using the function’s in TypeScript. If you have any other queries write us at support@acadgild.com.