Typescript-使用嵌套属性扩展另一个接口的接口

我有这样一个界面：

export interface Module {
  name: string;
  data: any;
  structure: {
    icon: string;
    label: string;
    ...
  }
}

如何扩展它，以便在不重复自己的情况下向结构中添加一些新属性？我是否必须为结构创建一个新的接口，并对其进行扩展，然后使用新的结构接口创建一个新的模块，或者是否有其他语法来实现这一点

理想情况下，我会写下这样的内容：

export interface DataModule extends Module {
  structure: {
    visible: boolean;
  }
}

export interface UrlModule extends Module {
  structure: {
    url: string;
  }
}

---

谢谢

接口不能添加到基本接口中的成员类型（至少不能直接添加）。您可以改为使用交叉点类型：

export interface Module {
name: string;
data: any;
    structure: {
        icon: string;
        label: string;
    }
}

export type DataModule = Module & {
    structure: {
        visible: boolean;
    }
}

export type UrlModule = Module & {
    structure: {
        url: string;
    }
}

let urlModule: UrlModule = {
    name: "",
    data: {},
    structure: {
        icon: '',
        label: '',
        url: ''
    }
}

它们的行为应该类似于接口，它们可以由类实现，当您为它们分配对象文本时，它们将得到检查

您也可以使用接口执行此操作，但它有点冗长，并且意味着使用类型查询来获取字段的原始类型，以及交叉点：

export interface DataModule extends Module {
    structure: Module['structure'] & {
        visible: boolean;
    }
}

export interface UrlModule extends Module {
    structure: Module['structure'] & {
        url: string;
    }
}

真正详细的选项（尽管在某些方面更容易理解）当然是为结构定义一个单独的接口：

export interface IModuleStructure {        
    icon: string;
    label: string;
}
export interface Module {
    name: string;
    data: any;
    structure: IModuleStructure
}
export interface IDataModuleStructure extends IModuleStructure{
    visible: boolean;
}
export interface DataModule extends Module {
    structure: IDataModuleStructure 
}
export interface IUrlModuleStructure extends IModuleStructure {
    url: string;
}
export interface UrlModule extends Module {
    structure: IUrlModuleStructure
}
let urlModule: UrlModule = {
    name: "",
    data: {},
    structure: {
        icon: '',
        label: '',
        url: ''
    }
}

编辑

根据pe@jcalz的建议，我们还可以使模块接口通用，并传入适当的结构接口：

export interface IModuleStructure {        
    icon: string;
    label: string;
}
export interface Module<T extends IModuleStructure = IModuleStructure> {
    name: string;
    data: any;
    structure: T
}
export interface IDataModuleStructure extends IModuleStructure{
    visible: boolean;
}
export interface DataModule extends Module<IDataModuleStructure> {
}
export interface IUrlModuleStructure extends IModuleStructure {
    url: string;
}
export interface UrlModule extends Module<IUrlModuleStructure> {
}
let urlModule: UrlModule = { // We could also just use Module<IUrlModuleStructure>
    name: "",
    data: {},
    structure: {
        icon: '',
        label: '',
        url: ''
    }
}

导出接口IModuleStructure{
图标：字符串；
标签：字符串；
}
导出接口模块{
名称：字符串；
资料：有；
结构：T
}
导出接口IDataModuleStructure扩展了IModuleStructure{
可见：布尔；
}
导出接口DataModule扩展模块{
}
导出接口IUrlModuleStructure扩展了IModuleStructure{
url:string；
}
导出接口UrlModule扩展模块{
}
让urlModule:urlModule={//
姓名：“，
数据：{}，
结构：{
图标：“”，
标签：“”，
url:“”
}
}

接口无法添加到基本接口中的成员类型（至少不能直接添加）。您可以改为使用交叉点类型：

export interface Module {
name: string;
data: any;
    structure: {
        icon: string;
        label: string;
    }
}

export type DataModule = Module & {
    structure: {
        visible: boolean;
    }
}

export type UrlModule = Module & {
    structure: {
        url: string;
    }
}

let urlModule: UrlModule = {
    name: "",
    data: {},
    structure: {
        icon: '',
        label: '',
        url: ''
    }
}

它们的行为应该类似于接口，它们可以由类实现，当您为它们分配对象文本时，它们将得到检查

您也可以使用接口执行此操作，但它有点冗长，并且意味着使用类型查询来获取字段的原始类型，以及交叉点：

export interface DataModule extends Module {
    structure: Module['structure'] & {
        visible: boolean;
    }
}

export interface UrlModule extends Module {
    structure: Module['structure'] & {
        url: string;
    }
}

真正详细的选项（尽管在某些方面更容易理解）当然是为结构定义一个单独的接口：

export interface IModuleStructure {        
    icon: string;
    label: string;
}
export interface Module {
    name: string;
    data: any;
    structure: IModuleStructure
}
export interface IDataModuleStructure extends IModuleStructure{
    visible: boolean;
}
export interface DataModule extends Module {
    structure: IDataModuleStructure 
}
export interface IUrlModuleStructure extends IModuleStructure {
    url: string;
}
export interface UrlModule extends Module {
    structure: IUrlModuleStructure
}
let urlModule: UrlModule = {
    name: "",
    data: {},
    structure: {
        icon: '',
        label: '',
        url: ''
    }
}

编辑

根据pe@jcalz的建议，我们还可以使模块接口通用，并传入适当的结构接口：

export interface IModuleStructure {        
    icon: string;
    label: string;
}
export interface Module<T extends IModuleStructure = IModuleStructure> {
    name: string;
    data: any;
    structure: T
}
export interface IDataModuleStructure extends IModuleStructure{
    visible: boolean;
}
export interface DataModule extends Module<IDataModuleStructure> {
}
export interface IUrlModuleStructure extends IModuleStructure {
    url: string;
}
export interface UrlModule extends Module<IUrlModuleStructure> {
}
let urlModule: UrlModule = { // We could also just use Module<IUrlModuleStructure>
    name: "",
    data: {},
    structure: {
        icon: '',
        label: '',
        url: ''
    }
}

导出接口IModuleStructure{
图标：字符串；
标签：字符串；
}
导出接口模块{
名称：字符串；
资料：有；
结构：T
}
导出接口IDataModuleStructure扩展了IModuleStructure{
可见：布尔；
}
导出接口DataModule扩展模块{
}
导出接口IUrlModuleStructure扩展了IModuleStructure{
url:string；
}
导出接口UrlModule扩展模块{
}
让urlModule:urlModule={//
姓名：“，
数据：{}，
结构：{
图标：“”，
标签：“”，
url:“”
}
}

对

模块使用泛型怎么样？或者这个建议太复杂了？是的。。那也行。。当我回到电脑上时，我会添加它：）@KaloyanDimitrov让我知道你决定使用哪个版本，我是你发现更容易实现/理解/编写的古玩：）
structure:Module['structure']&{visible:boolean；}
是我一直在寻找的语法。那么，你所说的@TitianCernicova Dragomir是没有办法做到这一点？（对于那些看不懂的人来说，这只是个玩笑，是的，我知道他列出了4种方法）。我将使用技术编号2
Module['structure']&{visible:boolean；}对
模块使用泛型如何？或者这个建议太复杂了？是的。。那也行。。当我回到电脑上时，我会添加它：）@KaloyanDimitrov让我知道你决定使用哪个版本，我是你发现更容易实现/理解/编写的古玩：）
structure:Module['structure']&{visible:boolean；}
是我一直在寻找的语法。那么，你所说的@TitianCernicova Dragomir是没有办法做到这一点？（对于那些看不懂的人来说，这只是个玩笑，是的，我知道他列出了4种方法）。我将使用技术编号2
Module['structure']&{visible:boolean；}