React报错之Cannot find name

.tsx扩展名

为了在React TypeScript中解决Cannot find name报错，我们需要在使用 JSX 文件时使用 .tsx 扩展名，在你的 tsconfig.json 文件中把 jsx 设置为 react-jsx ，并确保为你的应用程序安装所有必要的 @types 包。

下面是在名为 App.ts 的文件中发生错误的示例。

export default function App() {
  // ⛔️ Cannot find name 'div'.ts(2304)
  return (
      <input type="text" id="message" value="Initial value">
      {/* Cannot find name 'button'.ts(2304) */}
      <button>Click</button>
> 上述示例代码的问题在于，我们的文件扩展名为.ts，但是我们在里面却写的JSX代码。
这是不被允许的，因此为了在TS文件中使用JSX，我们必须：
将文件命名为.tsx扩展名；
在tsconfig.json中启用jsx选项。
确保编写JSX代码的所有文件拥有.tsx扩展名。
// App.tsx
export default function App() {
  return (
      <input type="text" id="message" value="Initial value">
      <button>Click</button>
如果在更新文件扩展名为.tsx后，问题依然没有解决，请尝试重启IDE和开发服务器。
tsconfig.json配置文件
打开tsconfig.json文件，确保jsx选项设置为react-jsx。
  "compilerOptions": {
    "jsx": "react-jsx", // 👈️ make sure you have this
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  "include": ["src/**/*"]
当jsx选项设置为react-jsx ，它会导致编译器使用JSX，将.js文件改为_jsx调用。
安装@types依赖包
另一个导致Cannot find name错误的原因是，我们没有安装必要的@types/包。
在项目的根目录下打开终端，运行下面的命令：
# 👇️ with NPM
npm install --save-dev @types/react @types/react-dom @types/node @types/jest typescript
# ------------------------------------------------------
# 👇️ with YARN
yarn add @types/react @types/react-dom @types/node @types/jest typescript --dev
该命令安装了react, react-dom, node, jest 的类型声明文件，同时也安装了typescript 。
如果依旧报错，请尝试删除node_modules和package-lock.json（不是package.json）文件，重新运行npm install 并重启IDE。
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
# 👇️ clean npm cache
npm cache clean --force
npm install
> 如果错误依旧存在，请确保重启IDE和开发服务器。VSCode经常出现故障，有时重新启动就能解决问题。
如果问题依旧存在，打开package.json 文件，确保下面的依赖包被包含在devDependencies对象中。
  // ... rest
  "devDependencies": {
    "@types/react": "^17.0.44",
    "@types/react-dom": "^17.0.15",
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.23",
    "typescript": "^4.6.3"
可以手动添加上述依赖，并重新运行npm install 。
npm install
或者安装下面依赖的最新版：
# 👇️ with NPM
npm install --save-dev @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest
# ------------------------------------------------------
# 👇️ with YARN
yarn add @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest --dev