如何解决VS2022中ASP.NET Core 6.0 React转TypeScript启动失败问题？

一、重置依赖与环境 #

• 删除项目根目录下的node_modules文件夹、package-lock.json文件
• 清空ClientApp/src下所有.js/.jsx文件（保留public目录及配置文件）

二、安装TypeScript核心依赖 #

进入ClientApp目录打开终端，执行：

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

三、添加TypeScript配置文件 #

在ClientApp根目录创建tsconfig.json，写入以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "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"]
}

四、重构React入口与组件 #

• 将ClientApp/src下新建index.tsx和App.tsx，替代原JS文件
• 给组件添加类型定义，示例：

// App.tsx
interface AppProps {
  // 根据业务需求定义props类型
}

export default function App(props: AppProps) {
  return <div>TypeScript React App</div>;
}

五、修正启动配置 #

打开ASP.NET Core项目的Properties/launchSettings.json，确认客户端启动命令指向ClientApp目录，且入口为src/index.tsx

六、重新启动项目 #

• 在项目根目录执行npm install
• 运行dotnet run或直接在VS中启动调试

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