Typescript - 接口(interface)扩展另一个具有嵌套属性的接口(interface)

Question

我有一个像这样的界面:

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

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

理想情况下，我会这样写:

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

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

谢谢!

Answer 1

接口(interface)不能添加到基接口(interface)中的成员类型(至少不能直接添加)。您可以改用交集类型:

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: ''
    }
}

它们的行为应该类似于接口(interface)，它们可以由类实现，并且当您将对象字面量分配给它们时会检查它们。

您也可以使用接口(interface)来完成，但它有点冗长，并且意味着使用类型查询来获取字段的原始类型，然后再次使用交集:

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

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

真正冗长的选项(虽然在某些方面更容易理解)当然是为结构定义一个单独的接口(interface):

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 的建议，我们还可以使模块接口(interface)通用，并传入适当的结构接口(interface):

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: ''
    }
}