TypeScript中Cloudflare图片处理options类型报错及适配RequestInit求助

问题场景 #

初始代码：

let options = {cf: { image: {} } }

需要根据URL查询参数，动态给options.cf.image添加属性：

if (url.searchParams.has("fit")) options.cf.image.fit = url.searchParams.get("fit")
if (url.searchParams.has("width")) options.cf.image.width = url.searchParams.get("width")
if (url.searchParams.has("height")) options.cf.image.height = url.searchParams.get("height")
if (url.searchParams.has("quality")) options.cf.image.quality = url.searchParams.get("quality")

触发TypeScript错误：Property 'fit' does not exist on type '{}'.ts (2339)，提示fit、width等属性不存在于options.cf.image的类型中。曾尝试为cf.image定义含可选属性的接口，但因searchParams.get()可能返回null（属性要求为string类型）未解决。最终options需传入fetch函数，其类型为RequestInit | Request。

解决方法 #

方法1：类型断言+非空断言 #

先定义包含所有可选属性的接口，再给image做类型断言，结合非空断言处理参数值的null问题：

interface CfImageOptions {
  fit?: string;
  width?: string;
  height?: string;
  quality?: string;
}

let options = { cf: { image: {} as CfImageOptions } };

if (url.searchParams.has("fit")) options.cf.image.fit = url.searchParams.get("fit")!;
if (url.searchParams.has("width")) options.cf.image.width = url.searchParams.get("width")!;
if (url.searchParams.has("height")) options.cf.image.height = url.searchParams.get("height")!;
if (url.searchParams.has("quality")) options.cf.image.quality = url.searchParams.get("quality")!;

• 接口CfImageOptions明确image支持的可选属性，让TypeScript识别这些属性。
• 用!非空断言是因为已经通过has()确认参数存在，get()不会返回null，可安全跳过null检查。

方法2：自定义类型守卫 #

如果不想用非空断言，可写类型守卫确保参数值为string类型：

interface CfImageOptions {
  fit?: string;
  width?: string;
  height?: string;
  quality?: string;
}

function isNonEmptyString(value: string | null): value is string {
  return value !== null;
}

let options = { cf: { image: {} as CfImageOptions } };

const fit = url.searchParams.get("fit");
if (isNonEmptyString(fit)) options.cf.image.fit = fit;

const width = url.searchParams.get("width");
if (isNonEmptyString(width)) options.cf.image.width = width;

const height = url.searchParams.get("height");
if (isNonEmptyString(height)) options.cf.image.height = height;

const quality = url.searchParams.get("quality");
if (isNonEmptyString(quality)) options.cf.image.quality = quality;

• 类型守卫isNonEmptyString让TypeScript知道，当函数返回true时，参数值是string类型，避免null类型报错。

方法3：提前初始化所有可选属性 #

直接在image对象中初始化所有可能的属性为undefined，让TypeScript自动推断类型：

let options = {
  cf: {
    image: {
      fit: undefined,
      width: undefined,
      height: undefined,
      quality: undefined
    }
  }
};

if (url.searchParams.has("fit")) options.cf.image.fit = url.searchParams.get("fit")!;
if (url.searchParams.has("width")) options.cf.image.width = url.searchParams.get("width")!;
if (url.searchParams.has("height")) options.cf.image.height = url.searchParams.get("height")!;
if (url.searchParams.has("quality")) options.cf.image.quality = url.searchParams.get("quality")!;

• 无需额外定义接口，初始化时声明所有属性后，TypeScript会自动识别属性的可选性。

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