Svelte+TypeScript项目传递number类型prop仅识别字符串如何解决

要解决Svelte中数字类型prop传递失效的问题，只需要修改父组件的传参写法即可。

问题原因 #

Svelte默认遵循HTML属性的原生行为：直接写prop=xxx时，xxx会被识别为静态字符串。哪怕你写的是数字2，也会被解析为字符串"2"，和子组件声明的number类型不匹配。

解决方法 #

传递非字符串类型的prop（数字、布尔值、对象、数组等）时，需要用大括号包裹值，告诉Svelte这是动态的JS/TS表达式：
修改父组件的组件调用代码：

<script lang="ts">
  import Infobox from "./Infobox.svelte";
</script>

<!-- 用大括号包裹数字，传递的就是number类型 -->
<Infobox classCount={2} taskCount={6} />

<style></style>

修改后子组件就能正常接收到数字类型的prop了。

额外注意事项 #

• 布尔值传参也需要用大括号，比如<Infobox visible={false} />，直接写visible=false会被识别为字符串"false"
• 如果prop值和当前作用域下的变量名同名，可以用简写语法：比如父组件有let taskCount = 6，可以直接写<Infobox {taskCount} />
• TypeScript场景下建议给子组件prop设置默认值，避免未传参时的类型报错，比如export let taskCount: number = 0

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