我有一个包含Node<Item | Category>的树结构

type Item {
    type: string; // DB discriminator that defaults to 'I'
    id: string;
    name: string;
    text: string[];
}
type Category {
    type: string; // DB discriminator that defaults to 'C'
    id: string;
    name: string;
    sub: Category[];
}
interface Node<Item | Category> {
    data: Item | Category;
}

然后有两个分量CategoryAndItemTreeComponent和ItemDetailsComponent。

@Component({ selector: 'app-tree', ... })
export class CategoryAndItemTreeComponent ... {
    selected?: Node<Item | Category> = null;
    ...
}

@Component({ selector: 'app-item', ... })
export class ItemDetailsComponent ... {
    item?: Item;
    ...
}

我想将详细信息字段绑定到HTML中的选定字段：

<app-tree #treeLink></app-tree>
<app-item [item]="treeLink.selected?.data"></app-item>

...但是item字段的类型是Item，而treeLink.selected?.data是Item | Category的并集。
如何检查示例、强制转换和赋值？
这在Angular或TypeScript中是不允许的吗？显然，这可以编译（在.ts文件中），但在模板中不允许。

this.item = <Item>selected;