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编译器也对{{1}的预先存在的属性和方法感到满意}。见here

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

2 个答案: