A Brief Introduction to TypeScript — Part 2

Functions are one of the fundamental building blocks of JavaScript and they play a role that is so important that make them deserve the name of first-class citizens 🎩. So, let’s dig into what TypeScript functions have to offer.

Named functions

The syntax to declare a function in JavaScript follows a particular structure:

For instance, if we would like to create a named function to calculate the sum of two given numbers, it would be like this:

And if we test it with numbers it behaves as expected:

But JavaScript allows to use this function with other datatypes, for example boolean and string:

And this is not bad per se… but maybe, just maybe… this could generate some unexpected behaviours when dealing with large scale projects. 🔥

This is why TypeScript adds new capabilities to these functions, one of them being the capability to declare the type of each parameter in order to create the signature:

We can also add a return type, but TypeScript is able to infer it with the return statements:

Optional and Default Parameters

In TypeScript, every parameter is assumed to be required by the function. This is very different from traditional JavaScript where every parameter is optional ❗. If we would like to have this optional parameters, we need to add them after the required parameters with ?:

In TypeScript, we can also set a default value for a parameter in case of not having a value provided or undefinedis passed.

Anonymous functions

If the function name is omitted in the function expression, it becomes an anonymous function. This kind of function is usually stored in a variable or used as an argument of another function.

When stored in a variable it ends with a semicolon because is part of an executable statement.

As seen before, TypeScript gives the option to add types to each parameter and to the function itself with the return type.

This is called anonymous function with type inference, but in the case that we would need to declare the full type of the function, it would be as follows:

In order to declare the type of the variable add the input and output types need to be declared. The input types are declared as (x: number, y; number)accordingly with the parameters of the function, and the output type is related to the return type numberpreceded by the => symbol.

Arrow functions

So far we have been seeing the functionkeyword a lot in the different declarations, and this is quite repetitive for a programming language that is functional. But TypeScript offers a simpler syntax to declare a function.

Let’s use one of the already studied functions:

We can rewrite addas follows:

This function declaration is called arrow function because of the => operator and is known in other languages as lambda function. In general, arrow functions can be declared as:

If the statements consist in just one return statement, it can be simplified and return can be omitted:

We can add types to each parameter and the return type: