Svelte组件中TypeScript联合类型歧义消除方案咨询

你遇到的是Svelte模板中TypeScript类型收窄不生效的问题，以下是几种可行的解决办法：

方案1：类型断言快速修复 #

在模板分支中通过类型断言明确指定当前item的类型，绕过类型检查的报错：

{#if item.id !== undefined}
  <CurrencyItem item={item as CurrencyItem} />
{:else}
  <GameItem item={item as GameItem} />
{/if}

方案2：自定义类型守卫（更严谨） #

编写类型守卫函数，让TypeScript能准确识别分支中的类型，适合需要严格类型校验的场景：

// 组件脚本或单独类型文件中定义
function isCurrencyItem(item: ItemTypes): item is CurrencyItem & { id: string } {
  return typeof item.id === 'string';
}

function isGameItem(item: ItemTypes): item is GameItem & { id: undefined } {
  return item.id === undefined;
}

模板中调用守卫函数进行判断：

{#if isCurrencyItem(item)}
  <CurrencyItem item={item} />
{:else}
  <GameItem item={item} />
{/if}

方案3：优化联合类型定义（推荐长期方案） #

给联合类型添加可辨识标签，让TypeScript自动完成完美类型收窄，同时让类型定义更清晰：

// 修改GameItem和CurrencyItem的定义，添加类型标签
type GameItem = {
  type: 'game';
  // 原GameItem的其他属性
};

type CurrencyItem = {
  type: 'currency';
  id: string;
  // 原CurrencyItem的其他属性
};

// 简化联合类型定义
type ItemTypes = GameItem | CurrencyItem;

模板中直接通过标签判断，类型自动收窄：

{#if item.type === 'currency'}
  <CurrencyItem item={item} />
{:else}
  <GameItem item={item} />
{/if}

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