注释从这开始~
总览
在React中，为了解决"Cannot find namespace context"谬误，在你应用JSX的文件中应用.tsx扩展名，在你的tsconfig.json文件中把jsx设置为react-jsx，并确保为你的利用程序安装所有必要的@types包。
这里有个例子来展现谬误是如何产生的。
// App.tsimport React from 'react';interface UserCtx { first: string; last: string; age: number;}const AuthContext = React.createContext<UserCtx | null>(null);const authContext: UserCtx = { first: 'James', last: 'Doe', age: 30,};const App = () => { // ⛔️ Cannot find namespace 'AuthContext'.ts(2503) return ( <AuthContext.Provider value={authContext}> <h2>Your app here</h2> </AuthContext.Provider> );};export default App;上述代码片段的问题在于，文件的扩大名为.ts ，然而咱们在外面编写JSX代码。tsx
这是不被容许的，因为为了能在TypeScript文件中应用JSX，咱们必须这样做：
- 以
.tsx扩展名命名文件 - 在
tsconfig.json文件中开启jsx选项
确保所有你编写JSX代码的文件都有.tsx扩展名。
// App.tsximport React from 'react';interface UserCtx { first: string; last: string; age: number;}const AuthContext = React.createContext<UserCtx | null>(null);const authContext: UserCtx = { first: 'James', last: 'Doe', age: 30,};const App = () => { return ( <AuthContext.Provider value={authContext}> <h2>Your app here</h2> </AuthContext.Provider> );};export default App;更新完文件的扩大名为.tsx后，如果问题仍未解决，请尝试重启你的IDE和开发服务器。
关上tsconfig.json文件，并确保jsx选项被设置为react-jsx。
// tsconfig.json{ "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时，它会导致编译器抛出.js文件，其中的JSX被改为_jsx调用。
如有必要请重启你的IDE和开发服务器。你的开发服务器不会接管这些变动，直到你进行它并从新运行npm start命令。装置@types/包
在React中呈现"Cannot find namespace context"谬误的另一个起因是，咱们没有装置必要的@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.jsonrm -f yarn.lock# ️ clean npm cachenpm cache clean --forcenpm install如果谬误依然存在，请确保重新启动你的IDE和开发服务器。VSCode经常出现故障，重启有时会解决一些问题。
手动增加
如果你依然失去"Cannot find namespace Context"的谬误，关上你的package.json文件，确保它在devDependencies对象中蕴含以下包。
// package.json{ // ... rest "devDependencies": { "@types/jest": "^27.4.1", "@types/node": "^17.0.24", "@types/react": "^18.0.5", "@types/react-dom": "^18.0.1", "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