What is the syntax for defining parameters in an overloaded arrow function in TypeScript?

Question

What is the syntax for defining parameters in an overloaded arrow function in TypeScript?

Trying to create an async arrow function that can handle a single image object or an array of image objects.

I'm new to TypeScript overloading and may be approaching this the wrong way.

Here's what I've come up with:

type ImageType = {
  uri: string;
  type?: string;
  height?: number;
  width?: number;
};

type ConvertImagesToJpegParams = {
  (param: ImageType): Promise<ImageType>;
  (param: ImageType[]): Promise<ImageType[]>;
};

const convertImagesToJpegAsync: ConvertImagesToJpegParams = async (images) => {
  const isImagesAnObject = typeof images === 'object';
  const imagesToConvert = isImagesAnObject ? [images] : images;

  let convertedImages = [];
  const convertImageToJpegPromises = imagesToConvert.map(async (image) => {
     // do stuff that converts the image.
  });
  await Promise.all(convertImageToJpegPromises);

  return isImagesAnObject ? convertedImages[0] : convertedImages;
};

How should I define the types for async (images)?
If I specify images: ImageType | ImageType[], the map function gives an error.

^{Property 'map' does not exist on type 'ImageType | ImageType[]'.
Property 'map' does not exist on type 'ImageType'.ts(2339)}
Once images is correctly typed, is there a more efficient way to check if isImagesAnObject? I tried something like images instanceof ImageType but it didn't work.

javascript typescript

Answer 1

Answer №1

Regrettably, there doesn't seem to be a way to avoid specifically indicating the items type as either ImageType or ImageType[]. To determine if the argument is an array, you can use Array.isArray, and then proceed with either returning a mapped Promise.all for the asynchronous operation on the array, or simply executing the asynchronous operation on the individual item:

const convertImagesToJpegAsync: ConvertImagesToJpegParams = async (images: ImageType | ImageType[]) => {
    return Array.isArray(images)
        ? Promise.all(images.map(Promise.resolve)) // insert your actual async operation here
        : Promise.resolve(images); // insert your actual async operation here
};

Typescript is able to deduce the type of the parameters and their corresponding return types effectively even without the need for the ConvertImagesToJpegParams; thus, it is acceptable to exclude it (and entirely remove that type definition):

const convertImagesToJpegAsync = async (images: ImageType | ImageType[]) => {
    return Array.isArray(images)
        ? Promise.all(images.map(Promise.resolve))
        : Promise.resolve(images);
};

Answer 2

Regrettably, there doesn't seem to be a way to avoid specifically indicating the items type as either ImageType or ImageType[]. To determine if the argument is an array, you can use Array.isArray, and then proceed with either returning a mapped Promise.all for the asynchronous operation on the array, or simply executing the asynchronous operation on the individual item:

const convertImagesToJpegAsync: ConvertImagesToJpegParams = async (images: ImageType | ImageType[]) => {
    return Array.isArray(images)
        ? Promise.all(images.map(Promise.resolve)) // insert your actual async operation here
        : Promise.resolve(images); // insert your actual async operation here
};

Typescript is able to deduce the type of the parameters and their corresponding return types effectively even without the need for the ConvertImagesToJpegParams; thus, it is acceptable to exclude it (and entirely remove that type definition):

const convertImagesToJpegAsync = async (images: ImageType | ImageType[]) => {
    return Array.isArray(images)
        ? Promise.all(images.map(Promise.resolve))
        : Promise.resolve(images);
};

Answer 3

Answer №2

Regrettably, this task cannot be accomplished as it is a runtime check. Nevertheless, you can utilize a type-guard to reach your desired outcome:

type ImageType = {
  uri: string;
  type?: string;
  height?: number;
  width?: number;
};

type ConvertImagesToJpegParams = {
    (...param: ImageType[]): Promise<ImageType[] | ImageType>;
};


// Implementing a Type guard for an array response
const isArray = <T extends object>(images: T | T[]): images is T[] => {
    return Array.isArray(images);
}


// Implementing a Type guard for an object response
const isObject = <T extends object>(images: T | T[]): images is T => {
    return !Array.isArray(images);
}

const convertImagesToJpegAsync: ConvertImagesToJpegParams = async (...images) => {
    if (images.length === 0) {
        // edge case; should probably throw an exception
    }

    const convertedImages: ImageType[] = [];
    const promises = images.map(async (image) => {
        // perform operations here
    });

    await Promise.all(promises);

    return images.length === 1
        ? convertedImages[0]
        : convertedImages;
};

// Now let's see how to use it

const result = await convertImagesToJpegAsync();
if (isObject(result)) {
   // now you have access to result.uri        
}
if (isArray(result)) {
  // now you can iterate through result.forEach
}

Answer 4

Regrettably, this task cannot be accomplished as it is a runtime check. Nevertheless, you can utilize a type-guard to reach your desired outcome:

type ImageType = {
  uri: string;
  type?: string;
  height?: number;
  width?: number;
};

type ConvertImagesToJpegParams = {
    (...param: ImageType[]): Promise<ImageType[] | ImageType>;
};


// Implementing a Type guard for an array response
const isArray = <T extends object>(images: T | T[]): images is T[] => {
    return Array.isArray(images);
}


// Implementing a Type guard for an object response
const isObject = <T extends object>(images: T | T[]): images is T => {
    return !Array.isArray(images);
}

const convertImagesToJpegAsync: ConvertImagesToJpegParams = async (...images) => {
    if (images.length === 0) {
        // edge case; should probably throw an exception
    }

    const convertedImages: ImageType[] = [];
    const promises = images.map(async (image) => {
        // perform operations here
    });

    await Promise.all(promises);

    return images.length === 1
        ? convertedImages[0]
        : convertedImages;
};

// Now let's see how to use it

const result = await convertImagesToJpegAsync();
if (isObject(result)) {
   // now you have access to result.uri        
}
if (isArray(result)) {
  // now you can iterate through result.forEach
}

What is the syntax for defining parameters in an overloaded arrow function in TypeScript?

Answer №1

Answer №2

Similar questions

How can express.js be properly installed using typescript?

Refreshing a section of a webpage using AJAX and PHP

Issue: When a function within a subscribe method does not return a value and its declared type is not 'void' or 'any', a TypeScript error occurs

What is an example scenario where Async Storage can be tested using Jest-expo?

Error in JSLint Object Detection

Modify the classname of two element class i

hiding html elements by using the display property set to none instead of physically removing

Guide on how to turn off cache in AngularJS + NodeJS CRUD application

Updating NodeJs to Express 4.0 may result in encountering errors

Having difficulty implementing a personalized color scheme for the mui component

End all occurrences of XMLHttpRequest

Implementing dropdown filtering for nested ng-repeats in Angular application

Issue with loading the main.css file

What is the reason javascript struggles to locate and replace strings with spaces in a URL?

Using Typescript for testing React components: successfully passing an array of objects as props

The specific type of selection return type in Prisma is restricted

Increase the bottom padding or add some extra space to the Bootstrap form or page

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

How to handle form-data in NestJS Guards?

Toggling with Jquery when an image is clicked