注释从这开始~

.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 (    <div>      <input type="text" id="message" value="Initial value" />      {/* Cannot find name 'button'.ts(2304) */}      <button>Click</button>    </div>  );}
上述示例代码的问题在于，咱们的文件扩大名为.ts，然而咱们在外面却写的JSX代码。

这是不被容许的，因而为了在TS文件中应用JSX，咱们必须：

  1. 将文件命名为.tsx扩展名；
  2. 在tsconfig.json中启用jsx选项。

确保编写JSX代码的所有文件领有.tsx扩展名。

// App.tsxexport default function App() {  return (    <div>      <input type="text" id="message" value="Initial value" />      <button>Click</button>    </div>  );}

如果在更新文件扩大名为.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 NPMnpm install --save-dev @types/react @types/react-dom @types/node @types/jest typescript# ------------------------------------------------------# ️ with YARNyarn 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.jsonrm -rf node_modulesrm -f package-lock.json# ️ clean npm cachenpm cache clean --forcenpm 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 NPMnpm install --save-dev @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest# ------------------------------------------------------# ️ with YARNyarn add @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest --dev