如何使用 typescript 在 svelte 中定义可选 prop？

Question

我想用 typescript 在 svelte 中声明一个可选的 prop，但出现以下错误：“需要声明或声明”。如何正确声明 prop？

我的风格

export enum MyVariants {
  one = 'one',
  two = 'two'
}

纤细的组件

<script lang="ts">
  export let variant?: MyVariants;
</script>

错误：

   ts Declaration or statement expected

Answer 1

警告：我还没有使用过 Svelte（还！）

但根据这个答案，在 Svelte 中使 prop 可选的方法是给它一个默认值（声明上的初始值设定项）。

因此，在您的情况下，您需要明确定义它，undefined并为其指定默认值undefined：

<script lang="ts">
  export let variant: MyVariants | undefined = undefined;
</script>

如果您要经常这样做，您可能需要像这样的可重用类型，它可能提供一些语义值：

type Optional<T> = T | undefined;

给你：

<script lang="ts">
  export let variant: Optional<MyVariants> = undefined;
</script>

如果你愿意，你可以undefined写成void 0. （我不这样做，但我经常受到诱惑。）这会给你：

<script lang="ts">
  export let variant: Optional<MyVariants> = void 0;
</script>

或者您可以有一个不执行任何操作的实用函数，同时提供类型和undefined 值：

function optional<T>(): T | undefined {
  return undefined;
}

那会给你：

<script>
let variant = optional<MyVariants>();
</script>