使用Create-React-App TypeScript模板生成JS文件而非TSX的问题

1. 强制使用最新版create-react-app #

出现版本不兼容提示，大概率是npx缓存了旧版的create-react-app。直接指定最新版执行创建命令：

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

或者先清除npx缓存再执行原命令：

npx clear-npx-cache
npx create-react-app my-app --template typescript

2. 卸载全局旧版create-react-app #

如果之前全局安装过旧版工具，npx会优先调用全局版本而非最新包，先卸载全局版本：

npm uninstall -g create-react-app

卸载完成后再重新执行创建命令。

3. 验证项目正确性 #

创建完成后，进入my-app目录，确认以下内容：

• 根目录存在tsconfig.json配置文件
• src目录下的入口文件为index.tsx、组件文件为App.tsx
• package.json中包含typescript、@types/react、@types/react-dom依赖项

4. 手动修复已创建的非TypeScript项目 #

若不想重新创建项目，可手动添加TypeScript支持：

• 安装依赖：

  npm install --save typescript @types/react @types/react-dom
  

• 在根目录创建tsconfig.json，配置参考最新create-react-app的TypeScript模板
• 将src下的.js/.jsx文件重命名为.ts/.tsx，补充必要的类型注解
• 更新react-scripts到最新版：

  npm install react-scripts@latest
  

内容的提问来源于stack exchange，提问作者Ristirianto Adi