Svelte(Vite)+Bootstrap5+SvelteStrap类型错误：string无法赋值给ButtonColor

错误原因 #

• SvelteStrap的Button组件对color属性做了严格类型定义，它只接受ButtonColor联合类型包含的特定值（比如'primary'、'danger'这类Bootstrap标准颜色）。
• 你写的let color = "danger";没有指定类型，TypeScript会自动把它推断为通用string类型，而通用字符串无法匹配ButtonColor的严格类型，所以编辑器抛出类型不匹配错误。
• 官网示例里给数组加了: any类型声明，相当于关闭了该变量的类型检查，所以不会触发报错；但这其实是绕过类型校验的写法，并非最优解。
• 浏览器能正常运行是因为类型错误属于TS静态检查阶段的提示，编译后的JS代码不会受类型约束影响。

解决方法 #

提供三种可行的修复方案：

方案1：显式指定变量类型为ButtonColor #

导入SvelteStrap提供的ButtonColor类型，给变量明确标注：

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<script lang="ts">
    import { Button, ButtonColor } from 'sveltestrap';
    let color: ButtonColor = "danger";
</script>

<div>
    <Button {color}>{color}</Button>
</div>

方案2：使用类型断言临时转换类型 #

如果不想启用TS，或者需要快速修复，可以用类型断言把字符串转为ButtonColor：

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<script>
    import { Button } from 'sveltestrap';
    let color = "danger";
</script>

<div>
    <Button color={color as unknown as ButtonColor}>{color}</Button>
</div>

方案3：用const断言让TS精确推断类型 #

如果变量值是固定的，用const断言让TS把它推断为字面量类型，而非通用字符串：

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<script lang="ts">
    import { Button } from 'sveltestrap';
    let color = "danger" as const;
</script>

<div>
    <Button {color}>{color}</Button>
</div>

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