带有显式 JSDoc 注释的奇怪打字稿推断

Question

我用打字稿风格的 JSDoc 注释编写了 vanilla JS。

推断出的 return 类型是 Promise<new (width?: number, height?: number) => HTMLImageElement>，我是不是漏掉了什么？

/**
 * Load an image from a given URL
 * @param {String} url The URL of the image resource
 * @returns {Promise<Image>}
 */
export function loadImage(url) {
  /*
   * We are going to return a Promise which, when we .then
   * will give us an Image that should be fully loaded
   */
  return new Promise((resolve) => {
    /*
     * Create the image that we are going to use to
     * to hold the resource
     */
    const image = new Image();
    /*
     * The Image API deals in even listeners and callbacks
     * we attach a listener for the "load" event which fires
     * when the Image has finished the network request and
     * populated the Image with data
     */
    image.addEventListener("load", () => {
      /*
       * You have to manually tell the Promise that you are
       * done dealing with asynchronous stuff and you are ready
       * for it to give anything that attached a callback
       * through .then a realized value.  We do that by calling
       * resolve and passing it the realized value
       */
      // @ts-ignore
      resolve(image);
    });
    /*
     * Setting the Image.src is what starts the networking process
     * to populate an image.  After you set it, the browser fires
     * a request to get the resource.  We attached a load listener
     * which will be called once the request finishes and we have
     * image data
     */
    image.src = url;
  });
}

Answer 1

您使用了错误的 return 类型：@returns {Promise<Image>}。

Image不能单独作为类型使用

查看 TS 内置类型中的 Image 声明：

declare var Image: {
    new(width?: number, height?: number): HTMLImageElement;
};

尽管 Image 是 constructor - 它没有声明为 class。因此，您不能在类型范围内使用它。

使用Promise<Image>与此示例相同：

const x = 10;

type Y = x;

x 是一个值，而 Y 是一个类型。你不能把它们混在一起。您只能在类型范围内使用 classes 和 enums。

您可能已经注意到，Image 是 return 和 HTMLImageElement 的构造函数。您的 JSDOC 中应使用此类型。

所以，你有两个选择：

@returns {Promise<InstanceType<Image>>}
@returns {Promise<HTMLImageElement>}

将鼠标悬停在const image上，您会看到它是一个HTMLImageElement。

请记住，您可以在 jsdoc

中使用 typescript utility types

带有显式 JSDoc 注释的奇怪打字稿推断

Weird typescript inference with explicit JSDoc annotations

javascript

jsdoc

typescript