Declaring Functions in Typescript

Welcome to the “Declaring Functions in TypeScript” section of our course “Learn TypeScript”! In this article, we will cover the different ways to declare functions in TypeScript and how you can use them to write clean and efficient code. By the end of this article, you should have a good understanding of these concepts and be able to use them effectively in your TypeScript programs.

Introduction to Functions

In TypeScript (and in many programming languages), a function is a block of code that performs a specific task. Functions can take input parameters, perform some operations using those parameters, and return a result.

For example, we can define a simple function that adds two numbers:

function add(x: number, y: number): number {
  return x + y;
}

console.log(add(10, 20)); // Outputs: 30

In this example, we have defined a function named “add” that takes two input parameters (x and y) of type “number” and returns a result of type “number”. We can call the “add” function by passing it two arguments (10 and 20), and it will return the sum of those numbers (30).

Function Declarations

The most common way to declare a function in TypeScript is using a function declaration. A function declaration consists of the “function” keyword, followed by the function name, a list of parameters, and a function body.

For example:

function add(x: number, y: number): number {
  return x + y;
}

In this example, we have defined a function named “add” that takes two input parameters (x and y) of type “number” and returns a result of type “number”. The function body consists of a single return statement that adds the x and y parameters and returns the result.

Function Declarations vs Function Expressions

It is important to note that function declarations and function expressions are not interchangeable in TypeScript. Function declarations are hoisted (i.e. they are moved to the top of the script at runtime), while function expressions are not. This means that you can call a function declaration before it is defined in the script, but you cannot do the same with a function expression.

For example:

// Function declaration
function add(x: number, y: number): number {
  return x + y;
}

console.log(add(10, 20)); // Outputs: 30

// Function expression
let subtract = function(x: number, y: number): number {
  return x - y;
};

console.log(subtract(10, 20)); // Outputs: -10

In this example, we have defined a function declaration named “add” and a function expression named “subtract”. We can call the “add” function before it is defined in the script, but we cannot do the same with the “subtract” function because it is a function expression.

Arrow Functions

Arrow functions (also known as “lambda functions”) are a shorthand syntax for defining functions in TypeScript. They are especially useful when you want to define a simple function with a single statement.

For example:

let add = (x: number, y: number) => x + y;

In this example, we have defined an arrow function named “add” that takes two input parameters (x and y) of type “number” and returns the sum of those numbers. The “=>” operator separates the input parameters from the function body.

You can also specify the return type of an arrow function using a type annotation. For example:

let add: (x: number, y: number) => number = 
(x, y) => x + y;

In this example, we have used a type annotation to specify that the “add” function takes two input parameters (x and y) of type “number” and returns a result of type “number”.

If you need to define a function with a block body (i.e. a function with multiple statements), you can use curly braces to enclose the function body and a “return” statement to specify the function’s return value. For example:

let add = (x: number, y: number): number => {
  let result = x + y;
  return result;
};

In this example, we have defined an arrow function named “add” that takes two input parameters (x and y) of type “number” and returns the sum of those numbers. The function body consists of a single “let” statement that declares a variable named “result” and assigns it the value of the x and y parameters. The function returns the “result” variable.

Optional and Default Parameters

In TypeScript, you can specify optional parameters by adding a “?” character after the parameter name. Optional parameters are parameters that are not required to be passed to the function when it is called.

For example:

function greet(name: string, greeting?: string): void {
  console.log(`Hello, ${name}! ${greeting || ''}`);
}

greet('John'); // Outputs: "Hello, John!"
greet('John', 'How are you doing?'); // Outputs: "Hello, John! How are you doing?"

In this example, we have defined a function named “greet” that takes two parameters: a required “name” parameter of type “string” and an optional “greeting” parameter of type “string”. If the “greeting” parameter is not passed to the function, it will default to an empty string.

You can also specify default values for parameters in TypeScript using the “=” operator. Default values are values that are assigned to the parameter if it is not passed to the function when it is called.

For example:

function greet(name: string, greeting: string = 'Hi'): void {
  console.log(`Hello, ${name}! ${greeting}`);
}

greet('John'); // Outputs: "Hello, John! Hi"
greet('John', 'How are you doing?'); // Outputs: "Hello, John! How are you doing?"

In this example, we have defined a function named “greet” that takes two parameters: a required “name” parameter of type “string” and a “greeting” parameter of type “string” with a default value of “Hi”. If the “greeting” parameter is not passed to the function, it will default to “Hi”.

You can also use default values in combination with optional parameters in TypeScript. For example:

function greet(name: string, greeting?: string, punctuation: string = '!'): void {
  console.log(`Hello, ${name}! ${greeting || ''}${punctuation}`);
}

greet('John'); // Outputs: "Hello, John!"
greet('John', 'How are you doing?'); // Outputs: "Hello, John! How are you doing?"
greet('John', undefined, '...'); // Outputs: "Hello, John! ..."

In this example, we have defined a function named “greet” that takes three parameters: a required “name” parameter of type “string”, an optional “greeting” parameter of type “string”, and a “punctuation” parameter of type “string” with a default value of “!”. If the “greeting” parameter is not passed to the function, it will default to an empty string. If the “punctuation” parameter is not passed to the function, it will default to “!”.

Rest Parameters

In TypeScript, you can use rest parameters to specify a variable number of arguments in a function. Rest parameters are specified using the “…” operator followed by the parameter name.

For example:

function add(...numbers: number[]): number {
  let result = 0;
  for (const number of numbers) {
    result += number;
  }
  return result;
}

console.log(add(1, 2, 3, 4, 5)); // Outputs: 15

In this example, we have defined a function named “add” that takes a variable number of arguments of type “number”. The “numbers” parameter is a rest parameter that represents an array of numbers. The function body iterates over the “numbers” array using a “for…of” loop and adds up all the numbers using a variable named “result”. Finally, the function returns the “result” variable.

You can use rest parameters in combination with other parameters in TypeScript. For example:

function greet(greeting: string, ...names: string[]): void {
  for (const name of names) {
    console.log(`${greeting}, ${name}!`);
  }
}

greet('Hello', 'John', 'Jane', 'Bob');
// Outputs: "Hello, John!"
//          "Hello, Jane!"
//          "Hello, Bob!"

In this example, we have defined a function named “greet” that takes a required “greeting” parameter of type “string” and a variable number of “names” parameters of type “string[]”. The function body iterates over the “names” array using a “for…of” loop and prints a greeting for each name.

Overloads

In TypeScript, you can use function overloading to define multiple functions with the same name but different signatures. Function overloading allows you to define multiple functions with different parameter lists and return types.

For example:

function greet(name: string): string;
function greet(age: number): string;
function greet(value: string | number): string {
  if (typeof value === 'string') {
    return `Hello, ${value}!`;
  } else {
    return `You are ${value} years old.`;
  }
}

console.log(greet('John')); // Outputs: "Hello, John!"
console.log(greet(30)); // Outputs: "You are 30 years old."

In this example, we have defined a function named “greet” that has two overloads: one that takes a “name” parameter of type “string” and returns a “string”, and another that takes an “age” parameter of type “number” and returns a “string”. The implementation of the “greet” function uses a type guard to determine the type of the “value” parameter and returns a different string depending on the type.

Function overloading is a powerful feature that allows you to provide different implementations of a function depending on the type of the input parameters. It is especially useful when you want to provide different behaviors for different types of input.

Conclusion

In this article, we have covered the different ways to declare functions in TypeScript and how you can use them to write clean and efficient code. We have learned about function declarations, function expressions, arrow functions, optional and default parameters, rest parameters, and function overloading.

By now, you should have a good understanding of these concepts and be able to use them effectively in your TypeScript programs. We hope you found this article helpful and that you will continue learning about TypeScript and all the other features it has to offer.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

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

console.log(greet('John')); // Outputs: "Hello, John!"

let add = (x: number, y: number) => x + y;

console.log(add(1, 2)); // Outputs: 3

function greet(greeting: string = 'Hi'): string {
  return `Hello, ${greeting}!`;
}

console.log(greet()); // Outputs: "Hello, Hi!"
console.log(greet('How are you doing?')); // Outputs: "Hello, How are you doing?"

function add(...numbers: number[]): number {
  let result = 0;
  for (const number of numbers) {
    result += number;
  }
  return result;
}

console.log(add(1, 2, 3, 4, 5)); // Outputs: 15

function greet(name: string): string;
function greet(age: number): string;
function greet(value: string | number): string {
  if (typeof value === 'string') {
    return `Hello, ${value}!`;
  } else {
    return `You are ${value} years old.`;
  }
}

console.log(greet('John')); // Outputs: "Hello, John!"
console.log(greet(30)); // Outputs: "You are 30 years old."