[!info] related notes

• 所属 MOC: TypeScript MOC
• 配置入口: tsconfig 使用详解
• 相关概念: JSX, TypeScript 中的 jsxImportSource, TypeScript 中的 noEmit

TypeScript 中的 jsx 编译选项

一句话定义

jsx 是 tsconfig 中控制 JSX 代码在 emit 阶段如何输出的选项。

核心机制 / 工作原理

它解决的不是“什么是 JSX 语法”，而是：

.tsx 文件里的 JSX，最终该被保留、还是被转换成什么 JavaScript 调用。

官方文档说明：

• 要使用 JSX，通常需要 .tsx 扩展名
• 还需要启用 jsx 选项

常见模式

TypeScript 文档里列出的常见 jsx 模式包括：

• preserve
• react
• react-native
• react-jsx
• react-jsxdev

最小例子 / 最小场景

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

preserve

保留 JSX，常见于还要交给 Babel / bundler 再处理的场景。

react

更偏 classic runtime，会 emit 成 React.createElement(...) 风格。

react-jsx

更偏 automatic runtime，会 emit 成 _jsx(...) 调用。

automatic runtime 的来源还能继续细化

如果你已经使用：

• react-jsx
• react-jsxdev

那 runtime 具体从哪个包导入，还可以继续看：

• TypeScript 中的 jsxImportSource

边界与易混淆点

jsx 选项不等于 JSX 语法本身

仓库里现有的 jsx 讲的是 React / JSX 语法表达层；这篇讲的是 tsconfig 里的编译策略。

jsx 主要影响 emit，不直接等于类型系统本身

官方文档强调，这些模式主要影响 JSX 的输出阶段。

noEmit: true 时也仍然要关心 jsx

即使不由 tsc 真正输出产物，TypeScript 仍然要理解：

• 当前项目是否允许 .tsx
• 当前 JSX runtime 应该如何被解释

参考信息

• TypeScript JSX Handbook: https://www.typescriptlang.org/docs/handbook/jsx