类型“EventTarget & HTMLInputElement”.ts(2339) 上不存在属性“值”

Question

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    setUserName(value)
  }

这是我的 handleChange 函数，第一次在 react 中编写 typescript。我想知道为什么我在 vs 代码中得到以下内容：

Property 'value' does not exist on type 'EventTarget & HTMLInputElement'.ts(2339)

一切正常，但这不会消失。

编辑：首先，感谢您分享该备忘单！一定能帮上大忙！

这是完整的文件：

import React, { useState } from "react";

const App: React.FC = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    setUserName(value);
  };

  return (
    <div>
      <form>
        <input
          type="text"
          placeholder="username"
          value={userName}
          onChange={handleChange}
        />
      </form>
    </div>
  );
};

export default App;

我尝试直接在 onChange 属性中删除句柄更改并退出函数，但问题仍然存在。

可能是我的 tsconfig.json 有问题吗？我只是使用 CRA 的默认配置

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

再次感谢

Answer 1

这里是 React 和 TypeScript 社区的朋友...

根据您提供的信息，很难判断 TypeScript 为何会抱怨。我整理了一个 CodeSandbox 来证明我没有看到同样的错误。

CodeSandbox demo

更新

感谢您添加文件以获取更多上下文。一切看起来都很好，包括您的tsconfig.json。您是否安装了 React 的 @types 包，即

    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",

这是唯一想到的其他事情。如果这不能解决问题，您能否包含指向 repo 或 CodeSandbox 的链接，并重现错误？然后我可以仔细看看。

第一次在 react 中写打字稿

如果您还没有，我建议您查看react-typescript-cheatsheet。当您不熟悉在 React 中编写 TypeScript 时，这是一个很棒的参考。