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

Change the <base> element programmatically during server-side rendering

Solving Angular Circular Dependencies

What is the method to have the text cursor within a text field start a few pixels in?

Warning: Potential spacing issues when dynamically adjusting Material UI Grid using Typescript

NextJs not processing Bootstrap form submissions

The JavaScript program is occasionally receiving unconventional input

How can you transfer data from a jQuery function to a designated div element?

Having trouble accessing @ViewChildren from the parent component

Using jQuery to compel a user to choose a value from the autocomplete suggestions within a textarea

The dictionary of parameters has an empty entry for the 'wantedids' parameter, which is of a non-nullable type 'System.Int32', in the 'System.Web.Mvc.JsonResult' method

including a code snippet within a dropdown menu or embedding it in a clickable button

The no-unused-expressions rule is triggered when an assignment or function call is expected

What is the best way to retrieve strings from an asynchronous POST request?

Having difficulty generating dynamic rows and tree dropdowns in AngularJS

When attempting to utilize a global variable in a POST request, it may be found to

Connecting nodes to edges based on their unique ids in the d3.js graph library

Creating a captivating animation for a social media like button with CSS

Navigate the JSON object at predetermined intervals, such as in the case of movie subtitles

Is it possible to transfer a variable from my javascript code to a jsp file?

Enforcing alias types in TypeScript arguments is necessary for maintaining consistency and clarity