Svelte+TypeScript联合类型CARD渲染时报类型不匹配怎么解决

TypeScript 无法通过 Array.includes() 调用自动收窄联合类型的范围，所以你当前的判断逻辑虽然运行时是正确的，但TS识别不到进入if分支时card必然是TEXT_CARD类型，因此抛出类型不匹配错误。你的初始CARD联合类型定义是正确的，不需要调整。

以下三种方案可按实际场景选择：

• 方案1：直接用字面量相等判断（最推荐）
  直接把模板中的if条件修改为多条件逻辑或，TS原生支持这种判断的类型收窄，不需要额外修改其他代码：

{#if card.type === "paragraph" || card.type === "h1" || card.type === "h2"}
  <TextCard {card} />
{:else}
  <ImageCard {card} />
{/if}

• 方案2：自定义类型守卫（扩展性最优）
  如果后续TEXT_CARD的type可取值会新增，不想每次都改判断条件，可以在index.svelte的script块中定义类型守卫函数：

<!-- index.svelte -->
<script lang="ts">
  import TextCard from "./TextCard.svelte";
  import ImageCard from "./ImageCard.svelte";
  export let card: CARD;

  // 新增类型守卫函数
  function isTextCard(card: CARD): card is TEXT_CARD {
    return ["paragraph", "h1", "h2"].includes(card.type);
  }
</script>

<!-- 模板中直接调用类型守卫 -->
{#if isTextCard(card)}
  <TextCard {card} />
{:else}
  <ImageCard {card} />
{/if}

• 方案3：手动类型断言（灵活度最高、安全性最低）
  如果你不想修改现有判断逻辑，可以直接在传参时手动指定类型，相当于手动覆盖TS的类型检查，需要你自行保证判断逻辑和断言类型的一致性，适合临时快速修复的场景：

{#if ["paragraph", "h1", "h2"].includes(card.type)}
  <TextCard card={card as TEXT_CARD} />
{:else}
  <ImageCard card={card as IMAGE_CARD} />
{/if}

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