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

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]