Vs code .value 无法被智能感知识别答案

【问题标题】：Vs code .value is not recognized by intellisenseVs code .value 无法被智能感知识别
【发布时间】：2019-03-20 22:46:04
【问题描述】：

我对 javascript 非常陌生，但在工作时，我试图找出一种方法来获取用户将输入到 html 输入文本框中的文本，但由于某种原因，vs 代码无法识别所需的智能感知去做这个。 [我的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>

[

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

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

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

no .value option, only .nodeValue

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

code is functional

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

【问题讨论】：

标签： javascript html input intellisense

【解决方案1】：

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

为了让智能感知知道您将拥有一个.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。

【讨论】：