vs code .value 不被 intellisense 识别

Question

我是 javascript 的新手，但在我工作的过程中，我试图找出一种方法来获取用户将输入到 html 输入文本框中的文本，但是对于某些原因 vs code 无法识别执行此操作所需的智能感知。

我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="first-input">
    <button id="submit-button">Submit</button>
    <script src="main.js" type="text/javascript"></script>
</body>
</html>

JavaScript:

let firstInput = document.getElementById('first-input');
let submitButton = document.getElementById('submit-button');

submitButton.onclick = function () {
    console.log(firstInput.value);
}

为了获取输入文本元素中的数据，代码是 .value，但是当我开始输入“.val-”时，VS 代码的唯一建议是 .nodeValue。

这意味着，为了得到我想要的，我使用了 vs code 的智能感知无法识别的命令。然而，即使智能感知没有找到它，代码仍然按预期运行。

我需要安装或执行某些操作才能访问此信息吗？我担心还有很多其他东西它无法识别，这会使学习这门语言更加困难。提前致谢

Answer 1

这是因为 getElementById() 不一定 return 具有 .value 属性的元素。例如，它可以 return 一个 <div> 元素。

为了让 intellisense 知道你会有一个 .value 属性，你必须用 JSDoc 注释表明变量 firstInput 将是一个 <input>元素。像这样：

/**
 * @type HTMLInputElement
 */
let firstInput = document.getElementById('first-input');
/**
 * @type HTMLButtonElement
 */
let submitButton = document.getElementById('submit-button');

submitButton.onclick = function () {
  console.log(firstInput.value);
}

不是为了让您感到困惑，VSCode 使用 TypeScript 为其智能感知提供支持，even for JavaScript code。

vs code .value 不被 intellisense 识别

Vs code .value is not recognized by intellisense

html

javascript

intellisense

input