打字稿错误：“HTMLElement”类型上不存在属性“附加”答案

【问题标题】：Typescript Error: Property 'append' does not exist on type 'HTMLElement'打字稿错误：“HTMLElement”类型上不存在属性“附加”
【发布时间】：2017-11-25 00:16:45
【问题描述】：

问题：

我在尝试将已编译的 Angular 1.5 模板附加到现有 HTMLElement 时收到 Typescript 2.2.1 编译错误。

代码：

$document.find(scope.target)[0].append($compile(menu)(scope)[0]);

编译错误：

[ts] Property 'append' does not exist on type 'HTMLElement'

我已经搜索了类型定义，但没有看到 append() 的签名。

关于我应该使用哪种类型或版本的打字稿有什么想法吗？

谢谢！

【问题讨论】：

你试过appendChild吗？ append 是实验性的，并不适用于所有浏览器。
@AndrewLi 不，还没有。我正在将现有的工作 .js 代码转换为打字稿。所以，我希望我不必更改任何内部结构，只需创建打字稿“容器”。

标签： javascript angularjs typescript typescript2.2

【解决方案1】：

这里与 TypeScript 无关。

正确的调用方法是appendChild:

https://developer.mozilla.org/en/docs/Web/API/Node/appendChild

append 是一个 jQuery 方法，如果你想使用它，你可以这样做：

$document.find(scope.target).append($compile(menu)(scope)[0]);

它也应该可以工作。

希望对你有帮助

【讨论】：

【解决方案2】：

HTMLElement 上有一个追加/前置功能。它是currently still experimental 的问题。

为了使用它而不会从 TypeScript 中得到错误，我将它用作任何¯\_(ツ)_/¯ (<any>myElement).append(otherElement)

【讨论】：

这是一个很好的解决方案。更好的语法是：(myElement as any).append(otherElement)

【解决方案3】：

Element.append() 现在存在（自 2016 年以来）。如果 TypeScript 发现错误：

类型：确保它是Element 而不仅仅是Node
配置：确保您正在加载 DOM 库
配置：确保您使用的是最新的 ES 目标/lib

示例配置：

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["dom", "es2019", "es2020", "dom.iterable"]
  }
}

【讨论】：