TSX文件转译后保留JSX的应用场景有哪些？

一、利用Babel实现更灵活的JSX编译 #

TypeScript的JSX转换功能偏基础，而Babel生态提供了不少TypeScript不支持的进阶转换能力：

• 支持自动引入React：旧版React要求每个使用JSX的文件手动导入React，Babel的@babel/plugin-transform-react-jsx可自动完成这一步，TypeScript早期版本无此功能，后续虽新增jsxImportSource，但生态适配度仍不如Babel
• 兼容CSS-in-JS库的编译时处理：像Emotion、Styled Components这类库，需要Babel插件在JSX阶段处理样式语法，TypeScript仅能做类型校验，无法完成这类编译转换
• 更早适配React 17+的新JSX转换，且能和Babel的其他插件（如代码分割、按需加载插件）配合，实现更复杂的构建优化

二、适配React Native的Metro打包工具 #

TypeScript中的react-native选项并非仅修改文件扩展名，保留JSX是React Native项目的硬性需求：

• Metro打包工具本身负责JSX转换，它依赖Babel插件完成React Native特有的优化，比如移动端代码压缩、原生模块桥接逻辑处理
• 若TypeScript提前将JSX转译为React.createElement，Metro无法识别<View>、<Text>这类原生组件的平台专属属性，会引发构建错误
• 生成.js扩展名的文件，也是为了匹配Metro默认的文件识别规则

三、适配多框架或多工具链的混合场景 #

部分项目会用TypeScript做类型校验，再用Babel接管代码转译，保留JSX能让Babel完全掌控JSX编译逻辑：

• 比如项目同时使用TypeScript和Vue/Preact等非React框架，TypeScript的JSX转换仅针对React，而Babel可通过配置不同插件处理不同框架的JSX语法
• 若使用Babel宏（如babel-plugin-macros），这类功能需要在JSX阶段介入处理，提前转译JSX会导致宏失效

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