尝试读取 HTML 元素时找不到名称 TS2304

Question

我有一个 IDE 正在使用 VS Code 和 Easy Compile 扩展(不能只安装 NPM 等)

我正在尝试只读取两个文本区域，以便我可以处理它们以进行输出，但对于正确的，我只是将它们放在页面上。

我已经手动调整了.js，它工作得很好，只是 .ts 文件不满意。

在 .ts 中

form.onsubmit = function(e) {
e.preventDefault();
output.innerHTML = nameInput.value + "are doing " + roleInput.value
}

在 HTML 中

<form id="userForm">
<div id="people">
<label for="nameInput">Enter names, separated by commas</label>
<textarea id="nameInput" name="namelist" required></textarea>
</div>
<div id="roles">
<label for="roleInput">Enter locations to inspect, separated by commas.</label>
<textarea id="roleInput" name="rolelist" required></textarea>
</div>
<button type="submit" type="Submit">Generate your list!</button>
</form>
<div id="output"></div>

我希望页面将文本放在"输出"div 中。

但

TS正在给我

找不到名称"输出"。

找不到名称"名称输入"。

找不到名称"角色输入"。

TS(2304) 错误。

Answer 1

根据下面的逗号，看起来您并没有像我最初认为的那样使用全局对象，您只是使用父上下文中的对象。

const output: HTMLTextAreaElement = document.getElementById(...)

不起作用 -getElementById返回一个HTMLElement.不幸的是，getElementById不是通用的。如果你使用的是querySelector，你可以做

const output = document.querySelector<HTMLTextAreaElement>(...)

它告诉 TS 您希望返回的是 TextArea 元素。相反，您必须键入断言

const output = document.getElementById(...) as HTMLTextAreaElement

现在输出具有正确的类型。

---

旧响应

正如评论中提到的，TS 在全局变量中开箱即用

。如果您知道global的外观，则可以使用环境类型/类型扩充来键入全局变量。

在上面的示例中，您可以提供全局环境类型：

declare var output: ...
declare var nameInput: ...
declare var roleInput: ...

这可以放在您引用它们的文件中，也可以放在类型文件中(通过tsconfig.json中的types或typeRoots指定)。

一种"更好"(更惯用)的方式来指定这些类型，如果通过全局对象的类型扩充。

对于基于浏览器的应用程序，它看起来像

declare interface Window {
output: ...
nameInput: ...
roleInput: ...
}

对于节点，它看起来像

declare var global {
...
}

注意：必须在全局变量前面加上window.或global.，类型扩充才能正常工作。