typescript 类型“节点”上不存在属性“querySelector”。在打字稿中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31237237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Property 'querySelector' does not exist on type 'Node'. in TypeScript
提问by u3257370
I have the following code: test.html
我有以下代码：test.html
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<script src="test.js"></script>
</body>
</html>
and the ts file test.ts
和 ts 文件 test.ts
var box = document.querySelector('#box');
console.log(box.parentNode.querySelector('#box'));
and i got the error.
我得到了错误。
Error:(2, 28) TS2339: Property 'querySelector' does not exist on type 'Node'.
I found the following sentence in MDN
我在MDN 中找到了下面这句话
parentNode is the parent of the current node. The parent of an element is an Element node, a Document node, or a DocumentFragment node.
parentNode 是当前节点的父节点。元素的父元素是 Element 节点、Document 节点或 DocumentFragment 节点。
here is my test
这是我的测试
var ul = document.querySelector('ul')
undefined
ul.parentNode.toString()
[object HTMLDivElement]"
could someone tell me what's wrong with that?
有人能告诉我这有什么问题吗？
the version of typescript is 1.4
打字稿的版本是 1.4
回答by basarat
could someone tell me what's wrong with that
有人能告诉我这有什么问题吗
TypeScript's view of the API. At the moment there is no way to say that the type of foo.parentNodedepends on the type of foo. Currently it is inferred to always be of type Nodeand Nodedoes not contain the API querySelector(available on Element)
TypeScript 对 API 的看法。目前还没有办法说 的类型foo.parentNode取决于 的类型foo。目前，它被推断为始终属于类型Node并且Node不包含 API querySelector（可在 上获得Element）
Fix
使固定
Use a type assertion as shown:
使用类型断言，如下所示：
var box = document.querySelector('#box');
console.log((<Element>box.parentNode).querySelector('#box'));
回答by connexo
For those looking for a solution using Typescript and JSX:
对于那些使用 Typescript 和 JSX 寻找解决方案的人：
const box = document.querySelector('#box');
console.log((box.parentNode as HTMLElement).querySelector('#box'));
回答by Hasan A Yousef
use
利用
let box = <Element>document.querySelector('#box');
回答by Avolition
For anyone encountering this problem with React Hooks / tsx, I updated my declaration of useRef with as HTMLElement | null, then I could use optional chaining without error.
对于在 React Hooks / tsx 中遇到此问题的任何人，我将 useRef 的声明更新为as HTMLElement | null，然后我可以使用可选链接而不会出错。
const formRef = useRef(null as HTMLElement | null);
const form = formRef?.current?.querySelector('form');
回答by Max Zakharzhevskiy
The parentNode member returns the parent node, which can be of type Element or Node. You have to use parentElement to traverse DOM tree instead of parentNode which traverse XML tree.
parentNode 成员返回父节点，可以是 Element 或 Node 类型。您必须使用 parentElement 来遍历 DOM 树，而不是使用 parentNode 来遍历 XML 树。
var box = document.querySelector('#box');
console.log(box.parentElement.querySelector('#box'));
回答by Jayant Bhawal
I was using create-react-app2.1's TS setup.
我正在使用create-react-app2.1的 TS 设置。
For me it was a matter of adding domto the liblist in tsconfig.json.
对我来说是增加的问题dom的lib列表tsconfig.json。
"lib": [..., "dom"]
