Svelte结合TypeScript时无法向组件传递prop的报错问题

报错的核心原因是Svelte 框架要求组件所有可接收的外部 prop 必须显式使用export关键字声明。你当前写的let title: string;只是组件的内部变量，没有被标记为对外暴露的传入属性，所以TypeScript类型检查会判定BigButton组件不存在title这个可配置属性，直接抛出类型不匹配的错误。
你尝试的两种传值写法本身都是Svelte支持的合法写法，问题和父组件传参逻辑无关，完全出在子组件的prop声明环节。

只需要修改BigButton组件的script块代码，给title变量加上export关键字，将其标记为对外接收的prop即可：

<script lang="ts">
// 增加export关键字，声明为组件可接收的prop
export let title: string;
</script>
<h1 class="text-2xl mb-4 font-extrabold">{title}</h1>

如果需要给prop配置默认值，直接在声明时赋值即可，父组件不传该属性时会自动使用默认值：

<script lang="ts">
export let title: string = "默认按钮文本";
</script>

修复完成后，你原来写的两种传参方式都可以正常生效：

• <BigButton title={'Join a Game'} />：用JS表达式传值，适合传递变量、动态计算结果的场景
• <BigButton title='Join a Game' />：直接传静态字面量，静态内容场景下写法更简洁

内容的提问来源于stack exchange，提问作者João Pedro