Next.js TypeScript中Cloudflare图片加载器类型错误求助

我用Next.js + TypeScript搭建网站，Cloudflare Pages不支持默认图片加载器，自定义了Cloudflare图片加载器后代码无法运行，报类型错误。

自定义Loader代码 #

const normalizeSrc = (src: string) => {
  return src.startsWith("/") ? src.slice(1) : src;
};

const cloudflareLoader = ({
  src,
  width,
  quality,
}: { src: string; width: number; quality: number; }) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }

  const paramsString = params.join(".");
  return `/cdn-cgi/images/${paramsString}/${normalizeSrc(src)}`;
};

Image组件代码 #

<Image
  loader={cloudflareLoader}
  src="/images/image-name.png" // 图片存放在public/images目录
  height={120}
  width={120}
  alt=""
/>

错误信息 #

Type '({ src, width, quality, }: { src: string; width: number; quality: number; }) => string' is not assignable to type 'ImageLoader'.
  Types of parameters '__0' and 'p' are incompatible.
    Type 'ImageLoaderProps' is not assignable to type '{ src: string; width: number; quality: number; }'.
      Types of property 'quality' are incompatible.
        Type 'number | undefined' is not assignable to type 'number'.
          Type 'undefined' is not assignable to type 'number'.

问题原因 #

Next.js的ImageLoaderProps类型中，quality参数是number | undefined（可选参数），但自定义loader里把quality定义成了必填的number类型，导致类型不兼容，触发TypeScript报错。

解决方法 #

只需要调整自定义loader的参数类型，让quality支持可选或undefined即可，有两种常见写法：

写法1：将quality设为可选属性

const normalizeSrc = (src: string) => {
  return src.startsWith("/") ? src.slice(1) : src;
};

const cloudflareLoader = ({
  src,
  width,
  quality,
}: { src: string; width: number; quality?: number; }) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }

  const paramsString = params.join(".");
  return `/cdn-cgi/images/${paramsString}/${normalizeSrc(src)}`;
};

写法2：给quality设置默认值

如果希望quality有默认值（比如75），可以直接在参数里赋值：

const normalizeSrc = (src: string) => {
  return src.startsWith("/") ? src.slice(1) : src;
};

const cloudflareLoader = ({
  src,
  width,
  quality = 75,
}: { src: string; width: number; quality?: number; }) => {
  const params = [`width=${width}`, `quality=${quality}`];

  const paramsString = params.join(".");
  return `/cdn-cgi/images/${paramsString}/${normalizeSrc(src)}`;
};

这样修改后，loader的参数类型就和Next.js要求的ImageLoader类型匹配了，错误会消失。

内容的提问来源于stack exchange，提问作者firefox9067