如何在 TypeScript 中鍵入重載箭頭函數的參數？

Question

我正在嘗試鍵入一個異步箭頭函數，該函數可以采用單個圖像對象或一組圖像對象。

TypeScript 重載對我來說是新的，我可能做的一切都完全錯誤。

這里的嘗試。

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;
};

• 我應該如何輸入async (images) ？
  如果我使用images: ImageType | ImageType[] images: ImageType | ImageType[]地圖抱怨。

  ^{類型“ImageType”上不存在屬性“map” | 圖像類型[]'。 類型“ImageType”.ts(2339) 上不存在屬性“地圖”}

• 正確輸入images ，是否有更好的方法來測試isImagesAnObject ？ 我images isinstanceof ImageType這樣的東西，但那是失敗的。

Answer 1

不幸的是，我認為沒有任何方法可以專門將items類型表示為ImageType或ImageType[] 。 然后使用Array.isArray檢查參數是否是一個數組，並在數組上的異步操作上返回映射的Promise.all ，或者只是對項目的異步操作：

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 可以很好地推斷參數的類型及其關聯的返回類型，而無需ConvertImagesToJpegParams ，所以請隨意忽略它（並完全刪除該類型定義）：

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

Answer 2

不幸的是，這無法完成，因為這是一個運行時檢查。 但是，您可以使用type-guard來實現您想要的：

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
}