使用Svelte遍历异构属性对象时遇TypeScript类型错误：format属性不存在

场景 #

有如下结构的JSON对象：

"properties": {
        "Design_definition": {
            "type": "string",
            "description": "File name of the tsv file with header names: sample,reference,fwd_pair,rev_pair",
            "default": "design.tsv",
            "format": "file-path",
            "mimetype": "tsv"
        },
        "Threshold": {
            "type": "number",
            "description": "Minimum value a score must have",
            "default": 0.85
        },
        "Taxonomical_domain": {
            "type": "string",
            "description": "Select the taxonomical domain of your organism",
            "enum": ["archaea", "bacteria", "eukaryota"],
            "default": "bacteria"
        },
        "Sensitive_calculation": {
            "type": "boolean",
            "description": "Calculation takes longer if selected"
        },...
}

遍历该对象的Svelte代码：

{#each Object.entries(currentWorkflow.item)  as [name, item]}
    <div>
        <span style='margin-right:1.25em' title={item.description} use:tooltip> {name}: </span> 
        <span> {item} </span>
        {#if item.type === 'string' && item.format === 'file-path' }
            test    
        {/if} 
    </div>
{/each}

报错信息（翻译后） #

错误： 属性“format”在类型“{ type: string; description: string; default: string; format: string; mimetype: string; } | { type: string; description: string; default: number; } | { type: string; description: string; enum: string[]; default: string; } | ... 9 more ... | { ...; }”上不存在。
属性“format”在类型“{ type: string; description: string; default: number; }”上不存在。js(2339)

报错原因 #

TypeScript无法确定遍历到的item必然包含format属性——只有部分子对象（比如Design_definition）有该字段，像Threshold这类对象没有，直接访问会触发类型检查错误。

解决方法 #

方法1：用可选链安全访问

最简单的方式是给format加可选链操作符?.，即使属性不存在也不会报错，只会返回undefined：

{#if item.type === 'string' && item?.format === 'file-path' }
    test    
{/if}

方法2：自定义类型守卫

写一个类型守卫函数，明确判断对象是否包含format属性，帮助TypeScript缩小类型范围：

function isFilePathItem(item: unknown): item is { type: 'string'; format: string; description: string; default: string; mimetype: string } {
    return typeof item === 'object' && item !== null && 'format' in item && (item as any).type === 'string';
}

模板中使用：

{#if isFilePathItem(item) && item.format === 'file-path' }
    test    
{/if}

方法3：定义完整的联合类型

提前给所有属性对象定义联合类型，让TypeScript明确每个子类型的结构：

type PropertyItem = 
    // 带format的字符串类型
    | { type: 'string'; description: string; default: string; format: string; mimetype: string }
    // 数字类型
    | { type: 'number'; description: string; default: number }
    // 带枚举的字符串类型
    | { type: 'string'; description: string; enum: string[]; default: string }
    // 布尔类型
    | { type: 'boolean'; description: string };

// 给currentWorkflow.item指定类型
const currentWorkflow: { item: Record<string, PropertyItem> } = /* 你的对象赋值 */;

这样TypeScript会根据item.type自动推断可访问的属性，无需额外判断即可安全访问format。

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