如何在 TypeScript 中为文档对象的方法创建签名重载-解网

问：

我正在使用没有任何组件框架/库（如 React 或 Vue）的 TypeScript，并且我正在使用 document.createElement 方法创建我的 DOM 组件，但既然我知道，这个方法只允许您传递要创建的元素的名称，之后我需要使用它们的 .setAttribute 方法为组件设置一些属性，但是根据属性的数量，光是做就可能需要 5~7 行。

因此，我想为此方法创建一个重载，该重载可以接受更多参数作为要设置的属性，并在内部调用 .setAttribute 方法来设置它们

一些例子：

// The default way to set the attributes
const element = document.createElement("div");

element.setAttribute("attr1", "value1");
element.setAttribute("attr2", "value2");
...
element.setAttribute("attrN", "valueN");

// What I want to do
const element = document.createElement("div", {attr1: "value1", attr2: "value2", ..., attrN: "valueN"});

注意

我认为为 .createElement 方法创建一个重载可能不是一个好的做法，因为它会改变文档对象的默认行为，所以如果有任何关于如何处理它的建议，它将受到欢迎！😊

TypeScript DOM 重载 domdocument createelement


export function elm<K extends keyof HTMLElementTagNameMap>(selector: K, attrs?: Record<string, string>): HTMLElementTagNameMap[K];
export function elm<E extends Element = HTMLElement>(selector: string, attrs?: Record<string, string>): E;
export function elm(): HTMLDivElement;
export function elm(selector: string = 'div', attrs: Record<string, string> = {}): HTMLElement {
    let el = document.createElement(selector);
    for (let [k, v] of Object.entries(attrs)) {
        el.setAttribute(k, v);
    }
    return el;
}

上一个：使用 DomDocument 将 <a> 标记替换为文本

下一个：是否对用于创建 DominoTree 的 DOM 有任何要求，例如具有命名空间感知能力或使用二级 dom 构建器创建？

如何在 TypeScript 中为文档对象的方法创建签名重载

How to create a signature overload for a method of the document object in TypeScript

评论