使用create-react-app创建React-Typescript项目失败求助

此前可正常使用create-react-app搭配TypeScript模板创建项目，但现在执行npx create-react-app my-typescript-project --template typescript时，在安装模板依赖阶段失败；使用无模板的create-react-app能正常搭建项目。已更新npm、Node.js和TypeScript，问题仍存在。操作输出如下：

PS E:\GAD\React-Basics-Courses\Gad\React_Projects\React_Typescript> npx create-react-app my-typescript-project --template typescript


Creating a new React app in E:\GAD\React-Basics-Courses\Gad\React_Projects\React_Typescript\my-typescript-project.       

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1455 packages in 4m

241 packages are looking for funding  run `npm fund` for details        

Installing template dependencies using npm...
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 @types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^18.0.0 @types/react-dom@^18.0.0 typescript@^4.4.2 web-vitals@^2.1.0` failed
PS E:\GAD\React-Basics-Courses\Gad\React_Projects\React_Typescript>

解决方案 #

• 清理npm与npx缓存
  缓存损坏常导致依赖安装异常，执行以下命令：

  npm cache clean --force
  npx clear-npx-cache
  

  之后重新执行TypeScript模板创建命令：

  npx create-react-app@latest my-typescript-project --template typescript
  

• 手动迁移为TypeScript项目
  如果模板安装始终失败，可先创建普通React项目，再手动添加TypeScript支持：

  1. 创建普通项目：

     npx create-react-app my-typescript-project
     

  2. 进入项目目录：

     cd my-typescript-project
     

  3. 安装TypeScript相关依赖：

     npm install --save typescript @types/react @types/react-dom @types/jest @types/node @testing-library/jest-dom @testing-library/react @testing-library/user-event web-vitals
     

  4. 在项目根目录创建tsconfig.json，配置参考如下：

     {
       "compilerOptions": {
         "target": "ESNext",
         "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,
         "jsx": "react-jsx"
       },
       "include": ["src"]
     }
     

  5. 将src目录下的.js/.jsx文件重命名为.ts/.tsx，比如App.js改为App.tsx，index.js改为index.tsx

• 切换npm镜像源
  网络问题可能导致依赖拉取失败，切换到国内镜像源：

  npm config set registry https://registry.npmmirror.com/
  

  之后重新执行创建命令

• 检查权限（Windows环境）
  以管理员身份运行PowerShell，避免权限不足导致的安装失败

内容的提问来源于stack exchange，提问作者Adeyemi Daniel Gad