如何为ASP.NET Core ReactJS项目启用TypeScript

1. 安装TypeScript及类型依赖 #

打开项目根目录的终端，执行以下命令安装所需开发依赖：

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

这些包包含TypeScript核心工具，以及React、ReactDOM和Node.js的类型定义文件，确保代码能获得类型提示和检查。

2. 生成并配置TypeScript配置文件 #

在终端运行初始化命令生成tsconfig.json：

npx tsc --init

打开生成的tsconfig.json，调整以下关键配置项（根据项目实际路径修改）：

• "jsx": "react-jsx"：适配React 17+的自动JSX转换语法
• "rootDir": "./ClientApp/src"：指定前端源码的根目录
• "outDir": "./ClientApp/build"：设置编译后的代码输出目录，和项目现有构建路径保持一致
• "allowJs": true：允许项目中同时存在JavaScript和TypeScript文件，方便逐步迁移
• "strict": true：启用严格类型检查（可选，按需开启，若追求宽松环境可设为false）

3. 调整前端构建脚本（按需） #

ASP.NET Core React模板默认使用react-scripts管理构建流程，安装TypeScript依赖后，react-scripts会自动识别TypeScript文件，无需修改package.json中的build脚本。如果项目使用自定义webpack配置，则需要添加ts-loader或babel-loader处理TypeScript文件。

4. 迁移现有JavaScript代码 #

• 逐步将.js文件重命名为.ts，.jsx文件重命名为.tsx（React组件建议用.tsx）
• 处理类型错误：为函数参数、变量添加类型注解，补全缺失的接口或类型定义
• 对于暂时无法处理的类型问题，可使用// @ts-ignore注释跳过单条语句的检查，或在tsconfig.json的exclude数组中添加对应文件路径

5. 验证配置是否生效 #

在终端运行npm run build，若构建成功且无TypeScript编译错误，说明配置生效。也可以启动开发服务器npm start，检查页面是否正常运行，同时查看编辑器的类型提示是否正常工作。

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