React Typescript编译失败无法输出到dist文件夹问题求助

问题1：tsc编译无文件输出到dist目录 #

你的tsconfig.json中配置了"noEmit": true，该参数会直接阻止TypeScript生成编译后的输出文件，自然不会有内容写入dist文件夹。如果要手动用tsc编译输出，将该参数改为false即可。

注意：你当前使用的是Create React App（CRA）脚手架创建的项目，CRA默认将noEmit设为true，因为项目的完整编译流程由react-scripts内置处理，不需要手动执行tsc命令。如果需要生产打包，直接运行npm run build即可自动将产物输出到build文件夹，无需修改配置。日常开发直接执行npm start启动开发服务器即可，所有TS编译、热更新能力都已经内置，手动调用tsc反而会和脚手架配置产生冲突。

问题2：重复类型声明报错 #

报错显示两个不同路径的@types/react类型文件被同时加载，一个是当前项目api-practice-frontend/node_modules下的，另一个是上层目录的node_modules中的。TypeScript默认会向上扫描所有父级目录的node_modules查找类型声明，如果你当前项目的上级目录（比如桌面、OneDrive根目录）安装过@types/react，就会触发重复声明冲突。
解决步骤：

• 删除当前项目的node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install安装依赖
• 在tsconfig.json的compilerOptions中新增配置"typeRoots": ["./node_modules/@types"]，强制TypeScript只读取当前项目下的类型包，不会向上扫描父级目录的类型文件

问题3：React/ReactDOM默认导入报错 #

你已经在tsconfig中开启了esModuleInterop和allowSyntheticDefaultImports，正常情况下完全支持import React from 'react'这种写法，该报错本质是前面的重复类型包问题导致的配置失效，解决完重复类型问题后该报错会自动消失。如果仍有问题，可以临时改为命名空间导入写法：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

其他代码问题 #

1. App.tsx中渲染逻辑有误：posts.map(post => <p>{post}</p>)直接输出了post对象，React不允许将对象直接作为子元素渲染，需要改成输出具体字段，示例：

posts.map(post => <p key={post.id}>{post.body}</p>)

2. index.tsx中css导入路径错误：import './dist/index.css'不符合项目结构，index.css默认存放在src根目录，直接改为import './index.css'即可。

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