Question

当我将鼠标悬停在VS Code中的JSX属性上时，IntelliSense工具提示中显示的类型是属性值的类型（我放置在其中的值），而不是组件的prop类型（定义的类型）由图书馆作者提供。）

类型检查仍然可以。如果我尝试将不兼容的类型用作该属性的值，则会显示错误。因此，VS Code知道JSX属性的预期类型，如果该属性具有可分配给prop类型的有效值，它只是不向我显示。（是的，我意识到大多数时候我使用的值都将与库作者指定的类型相同，但是有时它们不匹配时会引入细微的错误，这就是我徘徊检查的原因属性的类型。）

这是预期的行为吗？如果是，为什么？

顺便说一句，我知道我可以转到“定义”来查看库源代码中的类型。因此，至少有一种解决方法。

这里是复制步骤。

使用TypeScript（https://github.com/wmonk/create-react-app-typescript）创建React App

将此代码添加到任何TSX文件：

class Foo extends React.Component {

  handleClick = (event: any) => {
    console.log('clicked');
  }

  render() {
    return (
      <button onClick=></button>
    )
  }
}

将鼠标悬停在属性onClick上。错误消息显示onClick道具的类型为((event: MouseEvent<HTMLButtonElement>) => void) | undefined

[ts]
Types of property 'onClick' are incompatible.
Type 'true' is not assignable to type '((event: MouseEvent<HTMLButtonElement>) => void) | undefined'.
----------------------------------------------
(JSX attribute) onClick: true

现在为属性添加一个值，如下所示：
```
<button onClick={this.handleClick}></button>
```
再次将鼠标悬停在onClick属性上。

预期： 组件中道具的类型（与上面步骤3中的错误消息中所示的类型相同）。此类型：((event: MouseEvent<HTMLButtonElement>) => void) | undefined

实际： 显示属性值的类型。这种类型： (JSX attribute) onClick: (event: any) => void

这是一个错误吗？还是功能？

如果有关系，这是我已安装的扩展程序：

+---------------------------+--------------------+---------+
|         Extension         | Author (truncated) | Version |
+---------------------------+--------------------+---------+
| html-css-class-completion | Zig                | 1.17.1  |
| vscode-color              | ans                | 0.4.5   |
| npm-intellisense          | chr                | 1.3.0   |
| gitignore                 | cod                | 0.5.0   |
| vscode-eslint             | dba                | 1.4.12  |
| vscode-babel-coloring     | dza                | 0.0.4   |
| vscode-html-css           | ecm                | 0.2.0   |
| tslint                    | eg2                | 1.0.33  |
| vscode-npm-script         | eg2                | 0.3.5   |
| vscode-npm                | fkn                | 3.3.0   |
| auto-close-tag            | for                | 0.5.6   |
| auto-rename-tag           | for                | 0.0.15  |
| gitattributes             | has                | 0.4.1   |
| graphql-for-vscode        | kum                | 1.12.0  |
| node-module-intellisense  | lei                | 1.5.0   |
| mssql                     | ms-                | 1.4.0   |
| csharp                    | ms-                | 1.15.2  |
| node-debug2               | ms-                | 1.26.2  |
| debugger-for-chrome       | msj                | 4.8.0   |
| vscode-react-native       | vsm                | 0.6.12  |
| JavaScriptSnippets        | xab                | 1.7.0   |
| ReactSnippets             | xab                | 2.2.0   |
| propertylist              | zho                | 0.0.2   |
+---------------------------+--------------------+---------+

将鼠标悬停在JSX属性名称上会在工具提示中显示意外的类型。错误或功能？

0 个答案: