TypeScript Functions

Functions are an essential part of any programming language, including TypeScript. They allow us to encapsulate a block of code and reuse it multiple times, making our code more modular and maintainable. In this article, we will explore TypeScript functions, their types, and how to use them effectively.

Function Declaration

In TypeScript, we can declare a function using the function keyword, followed by the function name, parameters, and return type (optional). Here's an example:

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

In this example, we declare a function named add that takes two parameters a and b, both of type number. The function returns the sum of a and b, which is also of type number. We specify the parameter types and return type using TypeScript's type annotations.

Function Expression

We can also define functions using function expressions assigned to variables. This allows us to create anonymous functions or pass functions as arguments to other functions. Here's an example:

const multiply = function(a: number, b: number): number {
  return a * b;
};

In this example, we define a function expression and assign it to the multiply variable. The function takes two parameters a and b of type number and returns their product.

Arrow Functions

Arrow functions provide a concise syntax for defining functions, especially when we need to use them as callbacks or in higher-order functions. Here's an example:

const divide = (a: number, b: number): number => {
  return a / b;
};

In this example, we use an arrow function to define the divide function. It takes two parameters a and b of type number and returns their division.

Optional and Default Parameters

In TypeScript, we can make function parameters optional by adding a ? after their names. We can also provide default values for parameters using the assignment operator (=). Here's an example:

function greet(name: string, age?: number, message: string = "Hello"): void {
  console.log(`${message}, ${name}! You are ${age ?? 'unknown'}.`);
}

In this example, the name parameter is required, while the age and message parameters are optional. If the age parameter is not provided, it defaults to undefined. The message parameter defaults to "Hello" if not provided.

Function Overloading

TypeScript supports function overloading, allowing us to define multiple function signatures for the same function name. This enables us to provide different parameter types or return types based on specific conditions. Here's an example:

function processValue(value: number): number;
function processValue(value: string): string;
function processValue(value: number | string): number | string {
  if (typeof value === "number") {
    return value * 2;
  } else if (typeof value === "string") {
    return value.toUpperCase();
  }
}

In this example, we define three function signatures for the processValue function. The first signature accepts a number and returns a number, the second signature accepts a string and returns a string, and the third signature handles the common logic for both types.

Conclusion

Functions are a fundamental building block in TypeScript, allowing us to write reusable and modular code. We've covered the basics of function declaration, function expressions, arrow functions, optional and default parameters, and function overloading. Understanding these concepts will help you write more expressive and type-safe code in TypeScript.

Remember to always annotate the parameter types and return type of your functions to leverage the full power of TypeScript's type system. Happy coding!