正文从这开始~
.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 (
{/* Cannot find name 'button'.ts(2304) */}
);
}
上述示例代码的问题在于,我们的文件扩展名为这是不被允许的,因此为了在TS文件中使用JSX,我们必须:.ts
,但是我们在里面却写的JSX
代码。
- 将文件命名为
.tsx
扩展名; - 在
tsconfig.json
中启用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_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 --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
推荐阅读
- React报错之Object is possibly null
- React|React UI组件库——如何快速实现antd的按需引入和自定义主题
- React|【React路由】编程式路由导航和withRouter的使用——push / replace
- React|React路由组件传参的三种方式——params、search、state
- React|【React组件】github搜索案例之 父子组件通信 (附源码)
- React|【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- React|【ReactRouter5】路由的模糊匹配,重定向以及嵌套路由
- React|【React】深入理解React组件生命周期----图文详解(含代码)
- javascript|精读《useRef 与 createRef 的区别》