Step 4 – Functions and their types in TypeScript

In TypeScript, functions are first-class citizens, meaning that they can be assigned to variables, passed as arguments to other functions, and returned from functions. This makes functions a powerful tool for writing reusable and maintainable code.

Defining Functions

Functions can be defined using the function keyword, followed by the function name, a list of parameters in parentheses, and the function body in curly braces. Here’s an example:

function add(a: number, b: number): number {
  return a + b;
}

In this example, we define a function named add that takes two parameters of type number and returns a value of type number. The function body simply adds the two numbers and returns the result.

Function Types

In TypeScript, functions have types that describe their parameters and return values. The type of a function is defined using the same syntax as a function declaration, but without the function body. Here’s an example:

type AddFunction = (a: number, b: number) => number;

In this example, we define a type AddFunction that represents a function that takes two parameters of type number and returns a value of type number. The type is defined using an arrow function syntax, where the parameters are listed in parentheses, followed by the => symbol, and the return type.

We can now use this type to define variables that can hold functions of this type:

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

In this example, we define a variable add of type AddFunction and assign it a function that adds two numbers and returns the result. Note that we don’t need to specify the parameter and return types again when we define the function. TypeScript infers the types from the AddFunction type.

Optional and Default Parameters

Functions in TypeScript can have optional and default parameters. Optional parameters are denoted by adding a ? after the parameter name, while default parameters are specified by providing a default value in the parameter list. Here’s an example:

function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  } else {
    return `Hello, ${name}!`;
  }
}

console.log(greet("Alice")); // prints "Hello, Alice!"
console.log(greet("Bob", "Hi")); // prints "Hi, Bob!"

In this example, we define a function greet that takes two parameters: name and greeting, where greeting is an optional parameter. If the greeting parameter is provided, the function uses it to construct the greeting. Otherwise, it defaults to “Hello”.

Rest Parameters

Functions in TypeScript can also have rest parameters, denoted by adding ... before the parameter name. Rest parameters allow a function to accept an arbitrary number of arguments as an array. Here’s an example:

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, val) => acc + val, 0);
}

console.log(sum(1, 2, 3)); // prints 6
console.log(sum(4, 5, 6, 7)); // prints 22

In this example, we define a function sum that takes a rest parameter numbers of type number[]. The function uses the reduce method to add up all the numbers in the array.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.