在 TypeScript 中创建一个 HTMLHeadingElement

Question

我正在尝试创建一个HTMLHeadingElement. 为此，我使用：

const myHeading: HTMLHeadingElement = document.createElement("h3");

所以这很完美。但是当我尝试更动态地创建这个元素时，我失败了：

const level: number = 3;
const headingLevel: string = "h" + level;
const myHeading: HTMLHeadingElement = document.createElement(headingLevel);

所以，它看起来本质上是一样的，但显然不是。悬停时出现的错误myHeading是：

类型“HTMLElement”不可分配给类型“HTMLHeadingElement”

但是，在第一个示例中，该方法createElement("h3")立即返回 type HTMLHeadingElement。

现在，我的第一个问题是，这两个命令有何不同？如果不清楚，如何myHeading在第二个示例中获得与第一个示例中相同的结果？

Answer 1

createElement()TypeScript在其文件中有许多重载lib.dom.d.ts，因此它知道当createElement()使用“h3”调用时，将返回一个 HTMLHeadingElement：

createElement<K extends keyof HTMLElementTagNameMap>(tagName: K): HTMLElementTagNameMap[K];
createElement(tagName: string): HTMLElement;

当它在编译时不知道标签名称时，它只知道该方法返回一个 HTMLElement。不过，您知道这一点，因此您可以告诉 TypeScript：

const myHeading = document.createElement(headingLevel) as HTMLHeadingElement;