TypeScript Functions Type

TypeScript function types define the structure of a function, including its parameter types and return type, ensuring consistent and type-safe usage.

• Help validate the types of parameters passed to a function.
• Ensure the function returns the expected type.
• Improve code clarity and prevent runtime errors.

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

Parameters:

• function: The keyword used to create a function.
• functionName: Name of the function based on its functionality.
• param1, param2: Parameters listed in the function definition.
• type1, type2: Types of the parameters.
• value/expression: The return value, which can be a value or expression.
• returnType: The return type of the function.

There are several types of functions in TypeScript, which are listed below. We will explore these function types along with their basic implementations and examples.

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));

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

Output:

7

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));

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

Output:

3

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));

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

Output:

10

4. 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")); 

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

Output:

Hello, John Doe
Hi, Joe Smith

5. 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'
}

Example: Here is the basic example of Return type function in typescript.

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

console.log(square(4));

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

Output:

16

6. 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!");

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

Output:

 Hello, Rahul!

7. 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));

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

Output:

15

8. 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)); 

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

Output:

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

9. 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;

Example: In this example, two number type(a,b) parameters and a callback function(result) is passed to perform Operation function.

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

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

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

Output:

7

Best Practices for Using TypeScript Function Types

• Always Specify Return Types: Clearly define the return type for better readability and error prevention.
• Use Optional and Default Parameters Sparingly: Provide defaults only when it simplifies usage or prevents common errors.
• Prefer Arrow Functions for Callbacks: Use arrow functions for cleaner syntax and to maintain this context.

TypeScript Function Types - FAQs

What are function types in TypeScript?

Function types specify the structure of a function, including parameter and return types, ensuring type safety.

Can I omit the return type in TypeScript functions?

Yes, TypeScript can infer the return type, but explicitly defining it is a good practice for clarity.

What is the difference between a named function and an anonymous function?

A named function has a specific name, while an anonymous function is unnamed and typically assigned to a variable.

How are arrow functions different from regular functions in TypeScript?

Arrow functions provide a concise syntax and maintain the this context of their enclosing scope.

What is the purpose of function overloading?

Function overloading allows defining multiple signatures for a single function, enabling it to handle different parameter types or counts.

julietmaria

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• Geeks Premier League
• TypeScript
• Geeks Premier League 2023

+1 More