修复

Question

我有以下代码：的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>

和ts文件test.ts

var box = document.querySelector('#box');
console.log(box.parentNode.querySelector('#box'));

我得到了错误。

Error:(2, 28) TS2339: Property 'querySelector' does not exist on type 'Node'.

我在MDN

中找到了以下句子

parentNode是当前节点的父节点。元素的父元素是Element节点，Document节点或DocumentFragment节点。

这是我的测试

var ul = document.querySelector('ul')
undefined
ul.parentNode.toString()
[object HTMLDivElement]"

有人可以告诉我这有什么问题吗？

打字稿的版本是1.4

Answer 1

有人可以告诉我这个有什么问题吗

TypeScript的API视图。目前无法说foo.parentNode的类型取决于foo的类型。目前推断为始终为Node类型且Node不包含API querySelector（Element上提供）

修复

使用如下所示的类型断言：

var box = document.querySelector('#box');
console.log((<Element>box.parentNode).querySelector('#box'));

Answer 2

对于那些使用Typescript和JSX寻找解决方案的人：

var box = document.querySelector('#box');
console.log((box.parentNode as HTMLElement).querySelector('#box'));

Answer 3

使用

let box = <Element>document.querySelector('#box');

Answer 4

parentNode成员返回父节点，该节点可以是Element或Node类型。您必须使用parentElement遍历DOM树而不是遍历XML树的parentNode。

var box = document.querySelector('#box');

console.log(box.parentElement.querySelector('#box'));

Answer 5

我正在使用data2 =pd.DataFrame({ 'country': [None, 'USA', 'Belarus', 'Russia','Brazil'], 'population': [1, 2, 3, 4, 5]}) population multiplication 1 1 2 2 3 6 4 24 5 120的TS设置。

对我来说，这是将create-react-app添加到2.1的{{1}}列表中的问题。

dom

Answer 6

对于任何在React Hooks / tsx中遇到此问题的人，我用as HTMLElement | null更新了useRef的声明，然后可以使用可选链接而不会出错。

const formRef = useRef(null as HTMLElement | null);

const form = formRef?.current?.querySelector('form');

属性'query'上不存在属性'querySelector'。在TypeScript中

6 个答案:

修复