Horje
How to Type an Array of Functions Returning Their Respective Types in TypeScript ?

TypeScript is a statically typed language, that provides a powerful type system that allows developers to explicitly define the types of variables, functions, and more. When working with an array of functions in TypeScript, specifying the expected return types for each function becomes crucial, allowing the compiler to enforce strict type checks. The methods listed below can be used to type an Array of functions returning their respective types in TypeScript

Table of Content

Using Function Signatures

In this approach, we explicitly define function signatures within an array to indicate the expected return types for each function.

Syntax:

type FunctionArray = {
  functionName1: () => Type1;
  functionName2: () => Type2;
}[];

Example: Type FunctionArray is defined as an array of functions, each stating its return type and after that, we create an array of functions with predefined return types, and iterate through it to call and display the results of each function.

Javascript

// Define a type for the array of
//functions with specific return types
 
type FunctionArray = [
  () => number,
  () => string,
  () => boolean,
  () => number[]
];
 
// Create an array of functions
//adhering to the specified return types
 
const functionsArray1: FunctionArray = [
  () => 42,
  () => "Hello, TypeScript!",
  () => true,
  () => [1, 2, 3, 4, 5],
];
 
// Iterate through the array and
//call each function, display the result
 
functionsArray1.forEach((func, index) => {
  const result = func();
  console.log(`Approach 1 - Function ${index + 1}:`, result);
});

Output:

Approach 1 - Function 1: 42
Approach 1 - Function 2: Hello, TypeScript!
Approach 1 - Function 3: true
Approach 1 - Function 4: [1, 2, 3, 4, 5]

Using a union type for return types

Union type is used to encompass a variety of possible return types, allowing functions within the array to return values of different types as needed.

Syntax:

type FunctionArray = {
  functionName: () => Type1 | Type2 | Type3 | Type4;
}[];

Example: Here we first create a union type FunctionType to represent possible return types. After that we create an array (functionsArray2) of functions, each declaring its return type. The array is then iterated to call and display the results of each function.

Javascript

// Define a union type representing
//possible return types of functions
 
type FunctionType = () => number | string | boolean | number[];
 
// Create an array of functions
//with the specified return types
 
const functionsArray2: FunctionType[] = [
  () => 42,
  () => "Hello, TypeScript!",
  () => true,
  () => [1, 2, 3, 4, 5],
];
 
// Iterate through the array and
//call each function, display the result
 
functionsArray2.forEach((func, index) => {
  const result = func();
  console.log(`Approach 2 - Function ${index + 1}:`, result);
});

Output:

Approach 2 - Function 1: 42
Approach 2 - Function 2: Hello, TypeScript!
Approach 2 - Function 3: true
Approach 2 - Function 4: [1, 2, 3, 4, 5]

Using a map to associate function names

In this approach, we associate function names with their implementations using a map, creating an array of functions through value extraction.

Syntax:

 const functionMap: Record<string, () => any> = {
  functionName1: () => any;
  functionName2: () => any;
}[];

Example: functionMap is created which associates function names with their implementations. Then an array is created by extracting values from the map which iterates through the array to call and display the results of each function.

Javascript

// Define a map associating
// function names with their implementations
 
const functionMap: Record<string, () => any> = {
  returnNumber: () => 42,
  returnString: () => "Hello, TypeScript!",
  returnBoolean: () => true,
  returnNumberArray: () => [1, 2, 3, 4, 5],
};
 
// Create an array of functions
// by extracting values from the map
 
const functionsArray3 = Object.values(functionMap);
 
// Iterate through the array and call
//each function, display the result
 
functionsArray3.forEach((func, index) => {
  const result = func();
  console.log(`Approach 3 - Function ${index + 1}:`, result);
});

Output:

Approach 3 - Function 1: 42
Approach 3 - Function 2: Hello, TypeScript!
Approach 3 - Function 3: true
Approach 3 - Function 4: [1, 2, 3, 4, 5]

Using interface for function signatures

In this method, we establish an interface that outlines the expected structure of functions, enforcing a consistent signature across all functions within the array

Syntax:

interface FunctionInterface {
  functionName1: () => Type1;
  functionName2: () => Type2;
}

Example: Function signature is defined which create an array of functions adhering to the specified interface, the array is then iterated to call and display the results of each function.

Javascript

// Define an interface representing
// common function signatures
 
interface FunctionInterface {
  (): number | string | boolean | number[];
}
 
// Create an array of functions
// adhering to the interface
 
const functionsArray4: FunctionInterface[] = [
  () => 42,
  () => "Hello, TypeScript!",
  () => true,
  () => [1, 2, 3, 4, 5],
];
 
// Iterate through the array and
// call each function, display the result
 
functionsArray4.forEach((func, index) => {
  const result = func();
  console.log(`Approach 4 - Function ${index + 1}:`, result);
});

Output:

Approach 4- Function 1: 42
Approach 4 - Function 2: Hello, TypeScript!
Approach 4 - Function 3: true
Approach 4- Function 4: [1, 2, 3, 4, 5]

 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
How to use Spread Operator in TypeScript ? How to use Spread Operator in TypeScript ?
How to Select an Element by ID in JavaScript ? How to Select an Element by ID in JavaScript ?
How to Iterate JavaScript Object Containing Array and Nested Objects ? How to Iterate JavaScript Object Containing Array and Nested Objects ?
How to map Enum/Tuple to Object in TypeScript ? How to map Enum/Tuple to Object in TypeScript ?
How to create Selenium test cases How to create Selenium test cases

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje