是否可以在 svelte 中的每个块内进行类型转换

Question

我有这些类型：

type Exercise = {
 type: string
 prompt: string
 answer: string
}

type ComplexExercise = {
  type: string
  prompt: string,
  subExercises: Exercise[]
}

我正在尝试制作一个从 api 获取数据并根据类型

呈现数据的组件

<script lang="ts">
  let promise = getExercise(params.exerciseId).then((ex) => (exercise = ex));
  let exercise: ComplexExercise | Exercise;
</script>
...

{#await promise}
  <p>Loading exercise</p>
{:then}
  {#if exercise.type !== "COMPLEX"}
    <BaseEditor {exercise} />
  {:else}
    {#each exercise.subExercises as ex}
      <BaseEditor {ex} />
    {/each}
  {/if}
{/await}

我收到以下错误

Property 'subExercises' does not exist on type Exercise

转换它会抛出这个错误

{#each (exercise as ComplexExercise).subExercises as ex}
                 ^ Unexpected token svelte(parse-error)

唯一可行的方法是将锻炼类型设置为任意，我避免使用它的原因很明显。感谢任何帮助

Answer 1

更改您的类型以使用可区分的联合类型。这意味着，有一个共同的属性，TS 可以根据它确定它是哪种具体类型。在你的例子中属性是 type。假设你只有这两种运动类型：

type Exercise = {
 type: "SIMPLE"
 prompt: string
 answer: string
}

type ComplexExercise = {
  type: "COMPLEX"
  prompt: string,
  subExercises: Exercise[]
}

如果你这样做，TS 将通过 {#if exercise.type !== "COMPLEX"} 知道 else 块中的类型是 ComplexExercise 并且类型错误将消失。

更多关于受歧视工会的信息：https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions

是否可以在 svelte 中的每个块内进行类型转换

Is it possible to do type casting inside an each block in svelte

typescript

typescript-typings

svelte