多维json类型

Question

我有以下初始json:

let 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")

问题是，它返回的类型为">"；"适合"宽度"高度""质量">在选项中不存在。cfg.image元素(以下示例(：

Property 'fit' does not exist on type '{}'.ts (2339)

我试图为cfg.image创建一个接口，其中元素是可选的，但没有成功，因为它返回元素可以为null，而不能为null，因为它是一个字符串。

最后，我需要将选项发送到fetch(URL，options(函数，其中options的类型为RequestInit|Request

我的完整代码位于https://pastebin.com/fvvBpf1e.它是Cloudflare的用于调整图像大小的开源https://developers.cloudflare.com/images/image-resizing/resize-with-workers/#an-示例工人

Answer 1

问题是let options = {cf: { image: {} } }用类型{ cf: { image: {}; }; }定义options，这意味着TypeScript希望image键只包含一个空对象{}。

您可以使用适当的默认值将这些密钥添加到options定义中，或者为options定义一个适当类型的接口。

例如，

// These may not be suitable defaults, but just to illustrate
let options = { cf: { image: { fit: '', width: '', height: '', quality: '' } } }

将编译，因为typescript知道cf.image.fit应该存在并且具有类型。

接口解决方案可能看起来像：

interface Options {
cf: {
image: { 
// fit? means this type is `string | undefined` 
fit?: string;
width?: string;
height?: string;
quality?: string;
}
}
}
let options: Options = { cf: { image: {} } }

Answer 2

您发布了CloudFlare文档的链接。阅读它可能是一个好主意：

RequestInitCfProperties：

一个对象，包含可以在Request对象上设置的Cloudflare特定属性。例如：

// Disable ScrapeShield for this request.
fetch(event.request, { cf: { scrapeShield: false } })

cf对象中无效或名称不正确的键将被忽略。请考虑使用TypeScript和@cloudflare/workers-types来确保正确使用cf对象。

您可以在RequestInitCfProperties源代码中检查所需的类型

因此，正确的选项类型是：

interface CloudFlareFetchOptions {
cf: RequestInitCfProperties
}