Svelte.js中如何将导出变量设置为可选？

在Svelte中，定义带默认值的可选组件属性不需要用??或||，直接在export let声明时赋值即可，这是框架原生支持的语法，同时能避免TypeScript的"属性缺失"报错。

基础用法示例 #

子组件（MyChild.svelte） #

<script>
  // 可选属性，默认值为0
  export let x = 0;
  // 必填属性，不设置默认值即可
  export let requiredProp;
</script>

<div>
  必填属性值: {requiredProp}<br>
  可选属性值: {x}
</div>

父组件（MyParent.svelte） #

<script>
  import MyChild from './MyChild.svelte';
</script>

<main>
  <!-- 只传必填属性，可选属性用默认值 -->
  <MyChild requiredProp="必须传的值" />
  
  <!-- 同时传必填和可选属性，覆盖默认值 -->
  <MyChild requiredProp="必须传的值" x={20} />
</main>

TypeScript 类型注解（可选） #

如果使用TypeScript，为了明确类型并避免类型检查报错，可以加上类型注解：

<script lang="ts">
  export let x: number = 0;
  // 必填属性指定类型，不设默认值
  export let requiredProp: string;
</script>

针对你的场景（1个必填+5个可选） #

直接按以下方式声明即可，重复的默认值统一赋值：

<script>
  // 必填属性
  export let requiredData;
  
  // 5个可选属性，设置统一或各自的默认值
  export let opt1 = "default";
  export let opt2 = 100;
  export let opt3 = true;
  export let opt4 = [];
  export let opt5 = {};
</script>

原理说明 #

Svelte的export let语法是专门为组件props设计的：

• 不赋值的export let会被识别为必填属性，父组件必须传递，否则TS会报错。
• 赋值的export let会被识别为可选属性，父组件不传时自动使用默认值，TS不会强制要求传递。

这比React里用??或||的写法更简洁，也是Svelte官方推荐的方式。

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