如何将新属性添加到现有界面，然后在 Typescript 中导出新界面？答案

【问题标题】：how do i add new property to existing interface and then export the new interface in Typescript?如何将新属性添加到现有界面，然后在 Typescript 中导出新界面？
【发布时间】：2021-04-06 14:23:48
【问题描述】：

如何创建和导出新界面 - UIInterface：（希望将 SummaryInterface 与其他一些新属性结合起来）

例子：

import { SummaryInterface } from 'x-api'; // summaryInterface has 20+ properties defined and is auto-generated from script

我的尝试

export interface UIInterface {
    SummaryInterface &
     { displayStatus: string;
       flag: boolean }; 
}

【问题讨论】：

您只是在寻找extend an interface 之类的this 吗？如果这对你有用，我可以写一个答案；如果没有，你能详细说明吗？很高兴在这里看到minimal reproducible example（所以SummaryInterface 的定义以及一些显示用例的代码）。
扩展接口是否类似于将超接口的属性与其他自定义属性结合起来？
是的：来自手册“这允许您将一个接口的成员复制到另一个接口中，这使您可以更灵活地将接口分离为可重用的组件”
。我认为扩展界面是可行的。谢谢！

标签： javascript angular typescript interface ecmascript-2016

【解决方案1】：

通过像这样扩展其他接口：

export interface UIInterface extends SummaryInterface {
  displayStatus: string;
  flag: boolean;
}

【讨论】：

【解决方案2】：

你可以试试下面的代码：

通过扩展父类属性

说明：基本上，您在下面的代码中，同时具有父接口和子接口的属性。

export interface UIInterface extends SummaryInterface {
  displayStatus: string;
  flag: boolean;
}

【讨论】：