Svelte 模板 - Typescript 歧视联盟 - 错误 2322

Question

我有一个 Svelte 模板，它具有基于对象属性的子组件的条件输出。即使对象属性唯一标识对象类型，编译器也会抱怨 ts 2322。

//App.ts
<script lang="ts">
    import type {CheckboxData, LabelData} from 'Types.js';
    import Checkbox from 'Checkbox.svelte';
    import Label from 'Label.svelte';
    
    const tags = (CheckboxData | LabelData)[
                new CheckboxData(), new LabelData()
    ]   
</script>

{#each tags as tag}
    {#if tag.type === "CHECKBOX"}
        <Checbkox data={tag}/> // ts 2322 LabelData is not assignable to CheckboxData
    {:else if tag.type === "LABEL"}
        <Label data={tag}/>
    {/if}
{/each}
//end App.ts

// Types.ts
export class CheckboxData {
    type: "CHECKBOX";
    checked:boolean;
    name:string;
}

export class LabelData {
    type: "LABEL";
    text:string;
    for:string;
}
// end Types.ts

// Checbkox.svelte
<script lang="ts">
    import type {CheckboxData} from 'Types.js';
    export let data:CheckboxData;
</script>

<checkbox checked={data.checked} name={data.name}></checkbox>
// end Checkbox.svelte

// Label.svelte
<script lang="ts">
    import type {LabelData} from 'Types.js';
    export let data:Label;
</script>

<label for={data.for}>{data.text}</label>
// end Label.svelte

Answer 1

我错过了“方程”的字面部分，如果属性定义如下，则歧视有效：

type: "CHECKBOX"

不

type:string = "CHECKBOX"