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

Question

我正在使用TypeScript，没有任何组件框架/库，如React或Vue，我正在使用文档创建我的DOM组件。createElement方法，但是因为我知道，这个方法只允许您传递要创建的元素的名称，之后我需要使用为组件设置一些属性。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方法可能不是一个好的做法，因为它会改变文档对象的默认行为，所以如果有任何关于如何处理它的建议，它将是受欢迎的!😊

Answer 1

由于始终只有一个document，因此没有必要将createElement放在document上，只需创建一个新函数

我也为自己做了一个(但有其他优先级:通过id-class-attr选择器，附加参数)，你可以在这里检查:https://github.com/Dimava/PoopJs/blob/master/poopjs/elm.ts#L25

对于合适的类型，转到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;
}