Svelte组件如何实现依赖multiple的动态Props类型校验？

要在Svelte组件里实现你函数中那样的联合类型校验，核心是利用Svelte的defineProps泛型能力，直接传入关联的联合接口类型，让TypeScript自动校验multiple和value的组合合法性。

具体实现步骤 #

1. 定义联合类型接口
   在你的Svelte组件文件（比如MyComponent.svelte）中，先分别定义单选、多选两种状态的Props接口，再组合成联合类型：

interface SingleProps {
  multiple: false;
  value: string | null;
}

interface MultipleProps {
  multiple: true;
  value: string[];
}

type ComponentProps = SingleProps | MultipleProps;

2. 用defineProps绑定联合类型
   通过defineProps的泛型参数传入ComponentProps，TypeScript会自动关联multiple和value的类型依赖：

const { multiple, value } = defineProps<ComponentProps>();

效果验证 #

当你在父组件中错误组合Props时，TypeScript会直接抛出错误：

• 错误用法：<MyComponent multiple={false} value={['hello', 'world']} />
  TypeScript会提示类型不匹配，因为multiple: false时value只能是string | null，不能是数组。

• 正确用法示例：

<!-- 单选模式 -->
<MyComponent multiple={false} value="test" />
<MyComponent multiple={false} value={null} />

<!-- 多选模式 -->
<MyComponent multiple={true} value={['foo', 'bar']} />

补充：运行时校验（可选） #

如果需要在运行时也确保Props的合法性，可以添加响应式校验逻辑：

$: {
  if (multiple && !Array.isArray(value)) {
    throw new Error('当multiple为true时，value必须是数组类型');
  }
  if (!multiple && Array.isArray(value)) {
    throw new Error('当multiple为false时，value不能是数组类型');
  }
}

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