A function that can handle either a generic data type or an array containing elements of the same data type

Question

A function that can handle either a generic data type or an array containing elements of the same data type

  function process<Type>(input: Type | Type[]): Type {
    if (Array.isArray(input)) {
      // input here is definitely Type[]
      return input.map((element) => process(element) /* <- this error message is saying 'Type[]' is not the same as 'Type'*/);
    }
    // input here is definitely Type
  }

The issue I am encountering is that my IDE is showing an error for the recursive call process(element) even though I did not expect it to. On the other hand, when hovering over the variable within the isArray check or later on, the correct typing is displayed.

typescript types

Answer 1

Answer №1

If you need to handle either a single value or each value in an array differently, you can achieve it using the following approach:

function processValues<T, R>(input: T | T[], handleValue: (input: T) => R): R | R[] {
  if (input instanceof Array) {
    return input.map(handleValue);
  }
  let result: R = handleValue(input);
  return result;
}

The input can be of type T or an array of type T[]. The function handleValue applies the specified treatment to either an individual item or each item in the array.

The function will return either a treated item of type R or an array of treated items of type R[].

Example usage:

let result: string[] | string = processValues([1, 2, 3], value => value + "");

Answer 2

If you need to handle either a single value or each value in an array differently, you can achieve it using the following approach:

function processValues<T, R>(input: T | T[], handleValue: (input: T) => R): R | R[] {
  if (input instanceof Array) {
    return input.map(handleValue);
  }
  let result: R = handleValue(input);
  return result;
}

The input can be of type T or an array of type T[]. The function handleValue applies the specified treatment to either an individual item or each item in the array.

The function will return either a treated item of type R or an array of treated items of type R[].

Example usage:

let result: string[] | string = processValues([1, 2, 3], value => value + "");

Answer 3

Answer №2

One innovative approach is to implement an arrow function along with a type definition that can handle multiple function overloads.

type TreatmentOverload = {
    <T, R>(input: T, func: (input: T) => R): R,
    <T, R>(input: T[], func: (input: T) => R): R[]
}

const treatment: TreatmentOverload = (input, func) => {

  if(input instanceof Array) {
    return input.map(func);
  }

  return func(input);
}

This method presents the added advantage of accurately inferring the return type.

function convertNumberToString(arg: number): string {
  return arg.toString();
}

const a1 = treatment(1, convertNumberToString); // string
const b1 = treatment([1, 2, 3], convertNumberToString); // string[]

playground

Answer 4

One innovative approach is to implement an arrow function along with a type definition that can handle multiple function overloads.

type TreatmentOverload = {
    <T, R>(input: T, func: (input: T) => R): R,
    <T, R>(input: T[], func: (input: T) => R): R[]
}

const treatment: TreatmentOverload = (input, func) => {

  if(input instanceof Array) {
    return input.map(func);
  }

  return func(input);
}

This method presents the added advantage of accurately inferring the return type.

function convertNumberToString(arg: number): string {
  return arg.toString();
}

const a1 = treatment(1, convertNumberToString); // string
const b1 = treatment([1, 2, 3], convertNumberToString); // string[]

playground

Answer 5

Answer №3

To ensure proper type checking, it is advisable to implement a suitable type guard. One method is to adjust the function typings as shown below:

function process<Type>(input: Type | Array<Type>): Type {
  if (input instanceof Array) {
    return /* insert code here that utilizes the recursive 'process' call to return Type */
  }
  /** additional logic may go here */
  return input;
}

For instance:

function process<Type>(input: Type | Array<Type>): Type {
  if (input instanceof Array) {
    return input.map(d => process(input))[0]; 
  }
  input['_meta'] = '_special_object_'
  return input;
}

Answer 6

To ensure proper type checking, it is advisable to implement a suitable type guard. One method is to adjust the function typings as shown below:

function process<Type>(input: Type | Array<Type>): Type {
  if (input instanceof Array) {
    return /* insert code here that utilizes the recursive 'process' call to return Type */
  }
  /** additional logic may go here */
  return input;
}

For instance:

function process<Type>(input: Type | Array<Type>): Type {
  if (input instanceof Array) {
    return input.map(d => process(input))[0]; 
  }
  input['_meta'] = '_special_object_'
  return input;
}

A function that can handle either a generic data type or an array containing elements of the same data type

Answer №1

Answer №2

Answer №3

Similar questions

Limiting JSDoc/TypeScript type to a specific array element

What is the best way to show/hide group items in a PrimeNG dropdown menu?

Error message in VsCode plugin stating that property 'X' is not found on type '{}' within a Vue 3 template

Enhance Summernote functionality by creating a custom button that can access and utilize

Is it possible for a function within a nodejs module to be defined but display as undefined upon access?

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

Exploring the implementation of a custom validator within an Angular service

Instructions on how to dynamically show specific text within a reusable component by utilizing React and JavaScript

Issue with Angular 2 Custom Pipe not Refreshing Unless Object is Saved

Angular: How can I apply animation to rotate an image within a component?

Using Typescript with Protractor for Dropdown Menus

What is the reason for needing to specify event.target as an HTMLInputElement?

How can I dynamically change and load a configuration file based on the URL parameter using Angular?

The term "primordials is not defined" is a common error

Tips for testing FormGroupDirective within a component

Could we bypass the parent component somehow?

Retrieve the thousand separator for numbers using Angular in various languages

Angular form requests can utilize the Spring Security Jwt Token to allow all options methods

What is the best way to create a distinct slug using TypeScript and mongoose?

Embarking on a new undertaking with Visual Studio 2015 and diving into the world of Angular