如何将初始化的接口从父接口转换回子接口答案

【问题标题】：How to convert initialized interface from parent interface back to child interface如何将初始化的接口从父接口转换回子接口
【发布时间】：2021-04-10 22:36:30
【问题描述】：

我在 Typescript 中创建了一个如下所示的界面：

export interface item{
    itemid: string,
    description: string,
    price: number,
}

并用另一个看起来像这样的接口对其进行扩展：

export interface itemBook extends item{
    booktitle: string,
    edition: number,
    course: string,
}

我创建了一个 itemBook 实例 (tempBook) 并将其声明为一个项目，以将其放置在一个项目实例数组中。但是，一旦我从 item 数组中检索 tempBook，它就会被键入为只有 item 属性可见的 item。尝试检索 itemBook 属性表明 item 接口中缺少 itemBook 属性，但尝试编写将 tempBook 的类型转换回 itemBook 的函数无法解决此问题。签入控制台显示 tempBook 在尝试转换 tempBook 之前和之后确实具有所有 itemBook 属性。

我正在使用的页面有一个如下所示的组件：

export class BrItemComponent implements OnInit {
   Item: item; 
   ngOnInit(): void {
    this.getItem();
  }

  getItem():void{
    this.Item = tempBook
    this.setCategory(this.Item);
  }

  setCategory(Item: item):void  {
    var returnItem;
    if (Item.description == "book"){
        returnItem= Item as itemBook;
        this.Item = returnItem;
    }
    if (Item.description == "furniture"){
        returnItem = Item as itemFurniture;
        this.Item = returnItem;
    }
  }

将初始化的 Item 属性设置为 itemBook 实例不是一种选择，因为我打算使用同一页面显示从项目界面扩展的其他几种项目类型（itemFurniture、itemSports 等）。

如何将 tempBook 从它的父项类型转换回它的原始 itemBook 类型，以便我可以访问它的 itemBook 属性，或者至少可以从它的父界面访问 itemBook 属性？

【问题讨论】：

标签： javascript typescript interface

【解决方案1】：

您似乎正在尝试使用item 的description 属性来确定您是否拥有itemBook 或itemFurniture。

您可能需要考虑使用区分（或不相交）联合。 https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions

然后你可以像这样定义你的接口

type itemShared = {
    itemid: string,
    price: number,
};

export type itemBook = itemShared & {
    description: 'book',
    booktitle: string,
    edition: number,
    course: string,
};

export type itemFurniture = itemShared & {
    description: 'furniture',
};

export type item = itemBook | itemFurniture;

那么在你的if 语句中打字稿会自动找出如果description === 'furniture' 那么它的类型是itemFurniture。

【讨论】：