在TypeScript中使用“开放接口”扩展HTMLElement

Question

我想用额外的方法扩展内置的类HTMLElement。也许我要疯了，但我认为以下是官方成语：

interface HTMLElement {
   swapChildBefore(remove: HTMLElement, insert: HTMLElement, before: HTMLElement): void;
}

HTMLElement.prototype.swapChildBefore =
   function (remove: HTMLElement, insert: HTMLElement, before: HTMLElement): void {
      this.removeChild(remove)
      this.insertBefore(insert, before)
   }

至少，根据How does prototype extend on typescript?的说法，这样的东西应该可以工作。

然而，这似乎隐藏了HTMLElement上的所有现有方法。这是因为我声明了一个接口，它隐藏了同名的类吗？但是这个习惯用法似乎可以很好地用于Object和Array，它们也是类。

Answer 1

扩展接口必须在代码的根级别进行。如果您尝试在模块内扩展接口，则该模块内的代码只能看到该作用域内的接口。

打碎的例子：

interface ExpandableInterface {
    memberOfFIRSTDefinition: number;
}

module MyModule {
    interface ExpandableInterface {
        memberOfSECONDDefinition: number;
    }

    class MyClass {
        constructor() {
            var m: ExpandableInterface = {};
            m.memberOfFIRSTDefinition; // <-- It can't see this member because it's only scoped to the one inside of the module.
        }
    }
}

工作示例：

interface ExpandableInterface {
    memberOfFIRSTDefinition: number;
}

interface ExpandableInterface {
    memberOfSECONDDefinition: number;
}

module MyModule {
    class MyClass {
        constructor() {
            var m: ExpandableInterface = {};
            m.memberOfFIRSTDefinition; // <-- They're both root level, it can be seen :)
        }
    }
}

Answer 2

它对我来说工作得很好-在我声明了额外的方法(使用不同的名称以避免与现有的swapChildrenBefore冲突)之后，TypeScript编译器对HTMLElement的预先存在的属性和方法也很满意。请参阅here