How to type the parameters of an overloaded arrow function in TypeScript?

Question

I'm attempting to type an async arrow function that can take a single image object or an array of image objects.

TypeScript overloading is new to me and I may be doing everything completely wrong.

Here the attempt.

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 type async (images)?
  If I use images: ImageType | ImageType[] the map complains.

  ^{Property 'map' does not exist on type 'ImageType | ImageType[]'. Property 'map' does not exist on type 'ImageType'.ts(2339)}

• Once images is properly typed is there a better way to test for isImagesAnObject? I thought something like images isinstanceof ImageType but that was a fail.

Answer 1

Unfortunately, I don't think there's any way around specifically denoting the items type as being either ImageType or ImageType[]. Then check if the argument is an array using Array.isArray, and either return a mapped Promise.all on the asynchronous operation on the array, or just the asynchronous operation on the 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 can infer the type of the parameters and their associated return types just fine without needing the ConvertImagesToJpegParams though, so feel free to leave that out (and remove that type definition entirely):

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

Answer 2

Unfortunately, that cannot be done because this is a runtime check. However, you can use type-guard to achieve what you want:

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

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


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


// 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) => {
        // do stuff here
    });

    await Promise.all(promises);

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

// And now to use it

const result = await convertImagesToJpegAsync();
if (isObject(result)) {
   // now result.uri exists        
}
if (isArray(result)) {
  // now result.forEach exists
}