TypeScript Functions You Need to Know

TypeScript Functions You Need to Know

WHAT ARE FUNCTIONS?

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

In TypeScript, while there are classes, namespaces, and modules, functions still play a key role in describing how to do things.

WHAT TYPESCRIPT ADDS?

Functions are the primary means of passing data around in JavaScript. TypeScript allows you to specify the types of both the input and output values of functions.

TypeScript also adds some new capabilities to the standard JavaScript functions to make them easier to work with.

SYNTAX AND STRUCTURE:

In TypeScript, function definition consists of a function name, its parameters with types, and its return type (which can be inferred by TypeScript).

TYPE ANNOTATIONS:

When you declare a function, you can add type annotations after each parameter to declare what type of parameters the function accepts. You can add return type annotations to the function as well.

Parameter type annotations go after the parameter name. Return type annotations appear after the parameter list.

PARAMETER TYPE ANNOTATIONS:

Take a look at the following code:

const add = (a: number, b: number) => {
  return a + b;
};

console.log(add(1, 2));

In the above code, we declare an add function that accepts parameters a and b that is of type number.

RETURN TYPE ANNOTATIONS:

Although we usually don’t need a return type annotation because TypeScript will infer the function’s return type based on its return statement. In some cases, you have to explicitly specify a return type for documentation purposes to prevent accidental changes or just for personal preference.

```const returnANumber = (): number => { return 1; };


Here, we are specifying that the returnANumber will return a value with a type number.


**IDE SUPPORT FOR RETURN TYPE:**


The advantage of knowing the return type of a function is you get great IDE support if you want to do more operations on the value that is being returned.

For example,


```let parseRange = (
  range: string
): {
  start: number;
  end: number;
} => {
  let [start, end] = range.split("-");
  return {
    start: parseInt(start),
    end: parseInt(end),
  };
};

let parsedData = parseRange("1-5");

In the above example, we have explicitly mentioned the return type of the parseRange function. However, even if we don't specify the return type, TypeScript will infer the return type for us.

BENEFITS OF USING TYPESCRIPT:

  1. Precise defining through typing.
  2. Types make code management easier.
  3. Increased team performance.
  4. TypeScript is popular and trusted by the biggest players in the industry.

In TypeScript, functions are the building blocks of applications.

Having this knowledge will allow for more type-safe and easy-to-maintain functions throughout your code. Hope this helps you to make progress in your TypeScript journey.

Happy Coding!!