类似于Typescript: How to branch based on type，但这是使用Svelte，我已经使用运行时类型后卫每回答，和Svelte仍然抛出错误。
我有一个名为collectablesInFolders的数组，类型为Collectable | Folder。
Folders具有folderName属性。收藏品没有folderName。我有一个运行时类型检查：

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

我正在使用类型检查在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}

Svelte/TypeScript给出一个错误，folderName不存在于Collectable项目上：
类型上不存在属性folderName。
这是真的，但是该代码位于一个分支中，该分支仅用于具有folderName键的项。
同样，Svelte/TypeScript也给出了一个错误：
键入“{ collectableOrFolder：可收藏的|文件夹; }”不能分配给类型“{ collectable：可收藏;}'.
这也是真的，但是这段代码在一个分支中，该分支只针对没有folderName键的项目-即Collectables。
我试过使用as，但在Svelte HTML中似乎不允许使用{collectableOrFolder.folderName as Folder}。

如何在Svelte中使用基于TypeScript类型的分支代码？