TypeScript Functions Type

Last Updated : 22 Jan, 2025

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.

JavaScript

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 { }

TypeScript

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:

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 { }

TypeScript

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

TypeScript

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:

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 { }

TypeScript

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.

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:

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
}

TypeScript

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 { }

TypeScript

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:

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
}

TypeScript

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.

TypeScript

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:

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 Anonymous Functions Type

julietmaria

Improve

Article Tags :

TypeScript Functions Type

Parameters:

1. Named Function

Syntax

2. Anonymous Function

Syntax

3. Arrow Functions

Syntax

4. Optional and Default Parameters in Functions

Syntax

5. Return Type

Syntax

6. Void Return Type

Syntax

7. Rest Parameters

Syntax

8. Function Overloading

Syntax

9. Callback Function

Syntax

Best Practices for Using TypeScript Function Types

Similar Reads