TypeScript · Const

jsx

The jsx compiler option controls how JSX in .tsx files is emitted. TypeScript supports preserving JSX, classic React output, automatic production/development runtimes, and React Native-style preservation.

How it works

The jsx compiler option determines how JSX in .tsx files is emitted. Choose react-jsx or react-jsxdev for automatic runtimes, react for classic React.createElement output, or a preserving mode when another transform will handle JSX.

Syntax

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

Parameters

Name	Type	Description
`jsx`	`preserve` \| `react` \| `react-native` \| `react-jsx` \| `react-jsxdev`	Controls how JSX constructs are emitted in JavaScript files; accepted modes are `preserve`, `react`, `react-native`, `react-jsx`, and `react-jsxdev`.

Returns

Determines the emitted JavaScript or preserved JSX format; it does not return a runtime value.

Key points

Enable the jsx compiler option and place JSX-containing TypeScript in .tsx files.
The mode selects both the runtime style and the shape of emitted files.
Choose preserve when a subsequent tool should perform the JSX transformation.
The classic React mode converts JSX into React.createElement calls.

Common mistakes

preserve leaves JSX for a later transformer, so the emitted output is not final JavaScript.
react-native preserves JSX too, but emits a .js file rather than a .jsx file.

Example: Typed JSX component

import React from "react";

export function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

A .tsx module containing typed JSX; compile it with a JSX mode such as react-jsx.

When to use it

Automatic React runtime

A React application wants TypeScript to emit automatic-runtime JSX calls for production.

Deferred JSX transformation

A project uses Babel or another JSX transformer after TypeScript.

React Native output

A codebase targets React Native and needs JSX retained in JavaScript output.

Classic React runtime

A legacy React setup expects React.createElement output.

Interview questions

QWhat does the jsx compiler option control?

The jsx option controls how JSX constructs are emitted from .tsx files. Its modes include preserve, react, react-jsx, react-jsxdev, and react-native, each selecting a different output strategy.

Follow-up: When would preserve be preferable? Use it when another transform, such as Babel, is responsible for converting JSX later.

QHow do react and react-jsx differ?

react uses the classic runtime and changes JSX into equivalent React.createElement calls. react-jsx uses the automatic production runtime and emits calls such as _jsx instead.

Follow-up: How can the automatic runtime use a different library? Configure jsxImportSource for the module that supplies the JSX factory functions.

QWhat prerequisites are required for TypeScript JSX?

JSX must be written in files with the .tsx extension, and the jsx option must be enabled. The compiler can type-check JSX through the relevant JSX namespace supplied by the runtime's type definitions.

Follow-up: What changes when using a custom classic factory? jsxFactory changes the called function and also affects where TypeScript looks for the JSX namespace.

jsxFactory
jsxFragmentFactory
jsxImportSource
JSX namespace
tsx

Source: Documentation - JSX. Checked 2026-10-15.

jsx