Svelte 5组件根据href渲染按钮/锚点时的TS报错问题

错误原因分析 #

1. 解构href报错：你的Props是HTMLAnchorAttributes | HTMLButtonAttributes联合类型，TypeScript只允许解构联合类型中所有分支共有的属性。href仅属于HTMLAnchorAttributes，所以直接解构会触发类型错误。
2. restProps类型不匹配：解构后的restProps类型是联合类型的剩余属性，TypeScript无法自动将其收窄为对应元素的属性类型，因此展开到a或button时会出现类型不兼容。

解决方案 #

方案1：用in操作符做类型收窄

直接通过'href' in props判断属性存在，TypeScript会自动将props类型收窄为对应分支，无需额外解构：

<script lang="ts">
  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';

  type Props = HTMLAnchorAttributes | HTMLButtonAttributes;
  
  const props = $props<Props>();
</script>

{#if 'href' in props}
  <a {...props}>
    {@render props.children()}
  </a>
{:else}
  <button {...props}>
    {@render props.children()}
  </button>
{/if}

方案2：定义带判别式的联合类型

通过显式定义分支类型，让TypeScript更清晰地识别类型差异：

<script lang="ts">
  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
  import type { Renderable } from 'svelte';

  // 按钮类型：明确href不存在
  type ButtonProps = HTMLButtonAttributes & {
    children: () => Renderable;
    href?: never;
  };

  // 锚点类型：包含href（可选，符合HTML规范）
  type AnchorProps = HTMLAnchorAttributes & {
    children: () => Renderable;
  };

  type Props = ButtonProps | AnchorProps;

  const props = $props<Props>();
</script>

{#if 'href' in props}
  <a {...props}>
    {@render props.children()}
  </a>
{:else}
  <button {...props}>
    {@render props.children()}
  </button>
{/if}

方案3：自定义类型守卫函数

如果需要更复杂的类型判断逻辑，可以手动定义类型守卫：

<script lang="ts">
  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';

  type Props = HTMLAnchorAttributes | HTMLButtonAttributes;
  
  const props = $props<Props>();

  // 自定义类型守卫：判断是否为锚点属性
  function isAnchorProps(props: Props): props is HTMLAnchorAttributes {
    return 'href' in props;
  }
</script>

{#if isAnchorProps(props)}
  <a {...props}>
    {@render props.children()}
  </a>
{:else}
  <button {...props}>
    {@render props.children()}
  </button>
{/if}

关键说明 #

• 避免直接解构联合类型中非共有属性，改用整体判断后直接展开props，减少类型歧义。
• TypeScript的in操作符是简单有效的类型守卫，能自动收窄联合类型分支。
• 若需严格区分按钮和锚点的props范围，可通过href?: never强制按钮类型不接受href属性。

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