Type Annotating a Function

Learn via video courses
Topics Covered

Overview

We know typescript is a "typed" language where we can specify the type of variables. It also works very well for variables, objects, arrays and more so we do not need to write annotations for them,but for functions, inference evaluates only a return value and assigns the best possible type candidate for it. For functions, we need to write the annotation manually.

Introduction

Typescript uses type annotation to declare the types of variables, functions, arrays, objects, and more. We can specify the type of the parameters using: the type after the name of the variable, parameter, or property.

If we annotate the identifier once with a specific type then we can use ithe variable with that type only other wise the compiler will throw an error.

Let's see a simple example of type annotations in typescript :

In the above example, each variable is annotated with its specific type. This is a simple example of type annotations. Type annotations are used to enforce type checking. Using type annotations makes the code easier to read and understand and also avoids errors . Run this code in your editor for a better and clear explanation.

Now let's read about functions.

Functions in Typescript

Functions are the fundamental building blocks of any programming language. With the help of functions, we can implement the concepts of object-oriented programming like classes, objects, polymorphism, and, abstraction.

We use function so that the program becomes more readable and because the program is divided into smaller blocks.

There are two types of functions in typescript :

  1. Named Functions
  2. Anonymous Functions

Now let's read about named functions in detail

Named Functions

We use these types of functions in almost every programming language that is we name a function and call the function by its given name :

Let's see an example:

Output :

In the above example, we are simply declaring a function and after writing the code within the function we are simply calling it.

Let's see another example where we will pass parameters within the function :

Output :

Here we pass parameters within the function and return the type . Run this code in your editor for a better and clear explanation.

Now let's read about Anonymous Function.


Anonymous Function

Anonymous Function is a function that does not have any name associated with it. In the named function we used to name a function but here we only use the function keyword without the function name.

Let's see an example :

Output :

Let's see another example where we will parameters within the function :

Output :

Problems with Inference for Functions

TypeScript infers the type of variables when there is no explicit information available in the form of type annotations. Typescript never infers function arguments. So, unless we specify them, they are always going to be any. Type inference does not work for parameters in the case of functions. It only guesses the type of the return statement.

Let's see an example below :

Here type inference will not work in the case of parameters that are num1, num1 is of the any here while the return type is inferred as a number. This is a major problem of inference in functions. Run this code in your editor for a better and clear explanation.

Type Annotating Functions

We already know that with the help of type annotation, we can explicitly write the type of variables, functions, and more. Let's see the syntax of the typescript annotating function :

Syntax :

Let's see an example of a function annotation with parameter type annotation and return type annotation :

In the above example the function arguments are annotated with the number data type and so is the return type.

Let's see another example :

We know that functions are written in this way in typescript and if we look at the parameters passed inside the function we do not know the data types of them and we have to go through the whole code to see what is the data type of the variables, in this cases, typescript annotations helps us to explicitly write out the data type using type annotations.

Now lets similarly see how we can write this function in typescript using type annotations :

Here in this code, we have written the code similarly as it was written above just as we have added the types of each parameter as well as the type of the return type. This way we can annotate the types of our parameters in functions.

Advantages of Using Type Annotations in Typescript

  • Type annotations are very useful to explicitly specify the type of variables, function, and more.
  • Using type annotation makes the code more readable and easier to understand.
  • Type annotations help the compiler in checking types and help avoid errors dealing with data types.
  • With the help of type annotations we can declare the types of function parameters and also the return type of functions.

Conclusion

  • We know types is the unique feature in typescript so we annotate a variable, function, function return value, etc to let the compiler know how we intend to use it.
  • Type annotation are a handy way of saying explicitly what type should be used.
  • Type annotation helps the compiler in checking the types of variables and avoids errors when dealing with the data types.
  • Since we know type inference does not work for parameters in the case of functions, so we can use type annotations there.
  • We know that the compiler may not always be right while inferring the type of the variable , hence we should use type annotations to avoid any such errors.