如何在Svelte中基于TypeScript类型实现分支逻辑？

你的核心问题是类型守卫函数缺少类型谓词声明，导致TypeScript无法在Svelte模板的分支中自动收窄类型。以下是具体解决方案：

1. 修正类型守卫函数 #

将你的isAFolder函数修改为带类型谓词的形式，明确告诉TypeScript：当函数返回true时，参数是Folder类型：

const isAFolder = (collectableOrFolder: Collectable | Folder): collectableOrFolder is Folder => {
  return Object.hasOwn(collectableOrFolder, "folderName");
};

添加: collectableOrFolder is Folder这个类型谓词后，TypeScript就能在{#if isAFolder(...)}的分支中自动将变量类型收窄为Folder，在{:else}分支中收窄为Collectable。

2. 验证模板逻辑 #

修改后的函数在Svelte模板中无需额外调整，原代码即可正常工作：

{#each collectablesInFolders as collectableOrFolder}
  {#if isAFolder(collectableOrFolder)}
    <div class="collectable">
      <img src={FolderSVG} alt={collectableOrFolder.folderName} crossOrigin="anonymous" class="shadow" />
    </div>
  {:else}
    <CollectableThumb {collectableOrFolder} />
  {/if}
{/each}

此时TypeScript会正确识别：

• if分支中collectableOrFolder是Folder类型，可安全访问folderName
• else分支中collectableOrFolder是Collectable类型，符合CollectableThumb组件的参数要求

额外注意事项 #

• 确保你的Collectable和Folder类型定义没有重叠的folderName属性，否则类型谓词的逻辑会失效
• 如果你的Svelte项目TypeScript配置特殊，可检查tsconfig.json中strictNullChecks等严格模式是否开启（严格模式下类型收窄更可靠）

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