React报错之Cannot find name

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

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

export default function App() { // ?? Cannot find name 'div'.ts(2304) return ( {/* Cannot find name 'button'.ts(2304) */} ); }

上述示例代码的问题在于,我们的文件扩展名为.ts,但是我们在里面却写的JSX代码。
这是不被允许的,因此为了在TS文件中使用JSX,我们必须:
  1. 将文件命名为.tsx扩展名;
  2. tsconfig.json中启用jsx选项。
确保编写JSX代码的所有文件拥有.tsx扩展名。
// App.tsxexport default function App() { return ( ); }

如果在更新文件扩展名为.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/**/*"] }

【React报错之Cannot find name】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_modulespackage-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 --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 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

    推荐阅读