Function Types in TypeScript

Function types define the types of a function's parameters and return value, ensuring functions are called correctly and return the expected data type.

• Define parameter and return types.
• Improve type safety and code readability.
• Help prevent invalid function calls.

Syntax:

function functionName(parameters): returnType {
    // function body
}

• function: Declares a function.
• functionName: Name of the function.
• parameters: Input values with their types.
• returnType: Type of value returned by the function.

Types of Function Definitions

TypeScript provides multiple ways to define functions, including named, anonymous, and arrow functions.

1. Named Function

In TypeScript, functions are defined and called by their name. They include types for parameters and return values.

Syntax:

function functionName([args: type]): type { }

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

console.log(add(3, 4));

Output:

7

• Takes two number parameters and returns their sum.
• The return type of the function is explicitly specified as number.

2. Anonymous Function

An anonymous function in TypeScript is a function without a specific name, often defined inline, useful for one-off or small tasks where a named function isn't needed. The function call can be made using the variable to which it is assigned.

Syntax:

const variableName = function([args: type]): type { }

const subtract = function(a: number, b: number): number {
    return a - b;
}

console.log(subtract(5, 2));

Output:

3

• Declares an unnamed function assigned to subtract.
• The function accepts two numbers and returns their difference.

3. Arrow Functions

Arrow functions in TypeScript are concise function expressions using the => syntax. They retain the parent scope's this and are often used for short, simple functions.

Syntax:

const variableName = ([args: type]): type => expression;

const multiply = (a: number, b: number): number => a * b;

console.log(multiply(2, 5));

Output:

10

• Uses the arrow function syntax for simplicity and concise code.
• Multiplies two numbers and returns the result.

Function Parameters

TypeScript allows parameters to be required, optional, assigned default values, or collected using rest parameters

1. Optional and Default Parameters in Functions

Optional parameters in TypeScript allow you to specify function parameters that may be omitted when calling the function. Default parameters provide default values if no argument is passed.

Syntax:

function functionName(arg1: type, arg2?: type): type { }

function greet(firstName: string, lastName: string = "Doe"): string {
    return `Hello, ${firstName} ${lastName}`;
}

console.log(greet("John"));
console.log(greet("Joe", "Smith")); 

Output:

Hello, John Doe
Hello, Joe Smith

• lastName is optional with a default value of "Doe".
• If a value is provided for lastName, it overrides the default.

2. Rest Parameters

Rest parameters in TypeScript allow a function to accept a variable number of arguments of the same type, collecting them into an array for easy processing within the function.

Syntax:

function functionName(...args: type): type { }

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

console.log(sum(1, 2, 3, 4, 5));

Output:

15

• Collects multiple numeric arguments into an array.
• Uses reduce to calculate the sum of all elements.

Function Return Types

TypeScript allows you to specify what type of value a function returns or indicate that it returns no value.

1. Return Type

The return type in TypeScript specifies the data type a function should return. When we expect a function to return a particular type of value like either a string or a number, we can specify return types for functions.

Syntax:

function functionName(parameters: parameterTypes): returnType {
    // Function body
    return value; // Returns a value of 'returnType'
}

function square(num: number): number {
    return num * num;
}

console.log(square(4));

Output:

16

• The square function explicitly defines its return type as number.
• Calculates the square of the input number and returns the result.

2. Void Return Type

In TypeScript, the void return type indicates that a function doesn't return any value. It's often used for functions that perform actions without producing a result.

Syntax:

function functionName(parameters: parameterTypes): void {
    // Function body
    // No 'return' statement or 'return;' is used
}

function logMessage(message: string): void {
    console.log(message);
}

logMessage("Hello, Rahul!");

Output:

 Hello, Rahul!

• The logMessage function performs an action but does not return any value.
• Commonly used for logging or side effects.

Advanced Function Types

TypeScript supports advanced function patterns such as overloading and callbacks for flexible and reusable code.

1. Function Overloading

Function overloading in TypeScript enables defining multiple function signatures for a single function, allowing it to accept different parameter types or counts while providing type safety.

Syntax:

function functionName(arg1: type, arg2: type): type;
function functionName(arg1: type, arg2: type, arg3: type): type;
function functionName(...args: any[]): any {
    // Implementation
}

function greet(person: string): string;
function greet(person: string, age: number): string;
function greet(person: string, age?: number): string {
    if (age !== undefined) {
        return `Hello, ${person}, you are ${age} years old!`;
    }
    return `Hello, ${person}!`;
}

console.log(greet("Anne"));
console.log(greet("John", 30)); 

Output:

Hello, Anne!
Hello, John, you are 30 years old!

• Handles both single and dual-parameter calls.
• Differentiates functionality based on the number of arguments provided.

2. Callback Function

A callback function is a function that can be passed as an argument to another function and is executed when a specific event or task is completed. Callbacks are commonly used in asynchronous operations, such as handling the result of a network request or responding to user interactions.

Syntax:

type callBackType = (callBackFunctionName: type) => returnType;

function performOperation(a: number, b: number, callback: (result: number) => void): void {
    let result = a + b;
    callback(result);
}

performOperation(3, 4, (result) => {
    console.log(result);
});

Output:

7

• The performOperation function takes two numbers and a callback function as arguments.
• The callback is invoked with the result of adding the two numbers.