同一个React应用中能否同时运行TypeScript与JavaScript代码？

直接给两个核心问题的明确结论：

• JSX文件中完全可以正常导入TSX文件并完成交互，不存在底层兼容问题
• 不需要把整个应用全量改造为TSX格式，渐进式迁移是TypeScript官方支持的标准用法

前置配置要求 #

想实现JS/TS、JSX/TSX文件共存，只需要做几个基础配置，不需要改动现有业务代码：

1. 安装必要的开发依赖：npm install typescript @types/react @types/react-dom -D
2. 项目根目录创建tsconfig.json配置文件，必须开启allowJs: true选项，这个配置的作用是让TS编译器兼容存量JS/JSX文件，不会因为项目里存在非TS文件直接阻断编译
3. 如果你用的是Vite、CRA、Next.js这类主流React脚手架/框架，默认已经内置了TS文件的编译处理能力，不需要额外修改构建规则。

混合使用的注意事项 #

• TSX文件里定义的组件、工具函数、常量等常规内容，在JSX文件里的导入、调用方式和之前导入JSX文件完全一致，没有语法差异
• 不要在JSX文件里引用TSX中导出的TS专属类型（比如interface、type、enum这类编译时会被擦除的内容），会触发运行时错误；普通业务逻辑、组件的导入调用完全不受影响
• TSX侧写的类型约束只会在开发阶段给提示，不会强制阻断JSX侧的调用逻辑，你可以慢慢对齐类型规范，不用一次性改完所有代码

迁移建议 #

完全没必要为了用TSX一次性重构整个项目，你可以在后续新开发功能的时候直接用TSX编写，存量JSX代码可以在迭代过程中按需改造，甚至可以给暂不改造的JS文件加上// @ts-check注释，先享受基础的类型检查能力，不用急着修改文件后缀。

举个最常见的场景：你现有项目的列表页是JSX写的，现在要新写一个TSX格式的列表项组件，直接在列表页里import ListItem from './components/ListItem.tsx'，传props、绑定事件的写法和之前完全一样，项目可以正常启动、构建、运行。

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