从属性断言类型答案

【问题标题】：assert type from property从属性断言类型
【发布时间】：2021-12-16 22:48:18
【问题描述】：

我有一个 CARD 类型，它可以是 TEXT_CARD 或 IMAGE_CARD：

declare type TEXT_CARD = {
  type: "paragraph" | "h1" | "h2";
  text: string;
};

declare type IMAGE_CARD = {
  type: "img";
  src: string;
  orientation: "portrait" | "landscape";
};

declare type CARD = TEXT_CARD | IMAGE_CARD;

在渲染卡片时，我想在这两者之间切换以渲染单独的组件。

<!-- index.svelte -->
<script lang="ts">
  import TextCard from "./TextCard.svelte";
  import ImageCard from "./ImageCard.svelte";
  export let card: CARD;
</script>

{#if ["paragraph", "h1", "h2"].includes(card.type)}
  <TextCard {card} />
{:else}
  <ImageCard {card} />
{/if}



<!-- TextCard.svelte -->
<script lang="ts">
  export let card: TEXT_CARD;
</script>

<h1>{card.text}</h1>



<!-- TextCard.svelte -->
<script lang="ts">
  export let card: IMAGE_CARD;
</script>

<h1>{card.src}</h1>

但是现在，在 index.svelte 中，打字稿抱怨 CARD 不能分配给 TEXT_CARD。

Type 'CARD' is not assignable to type 'TEXT_CARD'.

我如何以及在哪里断言我确定我正在处理 TEXT_CARD / IMAGE_CARD？还是我应该以不同的方式设置我的类型？

【问题讨论】：

如果你交换 if/else 就可以了：if (card.type === 'img') ...typescriptlang.org/play?#code/…
感谢 Aleksey L。我仍然希望它有一个通用解决方案，如果将更多类型添加到 CARD 类型中，它将起作用。但这目前确实可以正常工作:)
你可以选择switch then（如果 svetle 允许的话）tsplay.dev/w6BMew
是的，我在 inline Svelte html 中搜索这个。看起来它不受支持，这使得这个问题成为打字稿问题和 Svelte (Sveltekit) 问题之间的奇怪组合:)。无论如何，感谢您的建议，现在我的代码工作正常。

标签： typescript svelte sveltekit

【解决方案1】：

我鼓励您在常量中定义["paragraph", "h1", "h2"]。然后，您可以轻松地告诉 TypeScript 正确的类型，例如：

const CUSTOM_TYPES: CARD['type'][] = ["paragraph", "h1", "h2"]

如果你像下面这样使用 TypeScript 就不会再抱怨了：

{#if CUSTOM_TYPES.includes(card.type)}
  ...
{/if}

【讨论】：

感谢您提出更好的打字稿的建议，但这并不能解决我的问题 - 应用此功能后 ts 错误仍然存在