Question

我有一个可与VS Code和Easy Compile扩展一起使用的IDE（不能仅安装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给了我

找不到名称“输出”。

找不到名称'nameInput'。

找不到名称'roleInput'。

ts（2304）错误。

Answer 1

根据下面的命令，看来您没有像我最初想象的那样使用 global 对象，而只是在使用父上下文中的对象。

>>> import pandas as pd
>>> var1 = 'hello'
>>> df = pd.DataFrame({'hello': [1]})
>>> df
   hello
0      1
>>> df.var1
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/blacksite/Documents/envs/dsenv/lib/python3.6/site-packages/pandas/core/generic.py", line 5067, in __getattr__
    return object.__getattribute__(self, name)
AttributeError: 'DataFrame' object has no attribute 'var1'
>>> df.hello
0    1
Name: hello, dtype: int64
>>> df[var1]
0    1
Name: hello, dtype: int64

不起作用-const output: HTMLTextAreaElement = document.getElementById(...)返回一个getElementById。不幸的是，HTMLElement不是通用的。如果您使用的是getElementById，则可以

querySelector

告诉TS您期望返回的是TextArea元素。相反，您必须输入assert

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

现在输出的类型正确。

旧回复

正如评论中提到的那样，TS在使用全局变量时表现不佳。

如果您知道const output = document.getElementById(...) as HTMLTextAreaElement的外观，则可以使用环境类型/类型扩充来键入全局变量。

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

global

此文件可以放在引用它们的文件中，也可以放在类型文件中（通过declare var output: ... declare var nameInput: ... declare var roleInput: ...中的types或typeRoots指定）。

如果通过全局对象的类型增强来指定这些类型的“更好”（更惯用）方式。

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

tsconfig.json

对于节点，它看起来像

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

注释：您必须为全局变量加上declare var global { ... }或window.才能使类型增强起作用。

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

1 个答案: