是否可以在svelte中的each块中进行类型转换
是否可以在svelte中的each块中进行类型转换
提问于 2021-04-11 00:28:39
我有这些类型：
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)唯一可行的方法就是将练习类型设置为any，我避免使用它的原因很明显。任何帮助我们都将不胜感激
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-11 16:30:44
更改您的类型以使用区分的联合类型。这意味着，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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67036699
复制相关文章
相似问题
腾讯云开发者
