---
source: https://iinventedlight.com/library/notes/typescript-jsx.md
title: "JSX in TypeScript"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (microsoft/TypeScript-Website); prose restates cited source lines"
attribution: "Summary by iinventedlight (AI-assisted). Sources: TypeScript (Microsoft), TypeScript: Documentation - JSX, CC BY 4.0 (microsoft/TypeScript-Website); TypeScript (Microsoft), TypeScript: TSConfig Option: jsx, CC BY 4.0 (microsoft/TypeScript-Website)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-04
as_of: 2026-11-04
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: TypeScript"
tags: ['typescript', 'jsx', 'react', 'tsconfig']
sources:
  - id: S1
    title: "TypeScript: Documentation - JSX"
    publisher: TypeScript (Microsoft)
    url: https://www.typescriptlang.org/docs/handbook/jsx.html
    accessed: 2026-11-04
    license: "CC BY 4.0 (microsoft/TypeScript-Website)"
  - id: S2
    title: "TypeScript: TSConfig Option: jsx"
    publisher: TypeScript (Microsoft)
    url: https://www.typescriptlang.org/tsconfig/jsx.html
    accessed: 2026-11-04
    license: "CC BY 4.0 (microsoft/TypeScript-Website)"
---
# JSX in TypeScript

**Answer:** TypeScript type-checks JSX in `.tsx` files and compiles it according to the `jsx` compiler option.

## Setup

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

Name files `.tsx`. As a result, TypeScript disallows angle bracket type assertions in .tsx files. (S1)

## jsx modes

| Mode | Output |
|---|---|
| preserve | `.jsx`, JSX unchanged |
| react-jsx | `.js`, `_jsx` calls for production |
| react-jsxdev | `.js`, `_jsx` calls for development |
| react-native | `.js`, JSX unchanged |

## Typing components

```tsx
type Props = { name: string };
function Hello({ name }: Props) { return <p>Hello {name}</p>; }
<Hello name="Ada" />;    // OK
<Hello />;               // error: name is missing
```


## Claims
- id: C1
  claim: Name your files with a .tsx extension.
  source: S1
  evidence: "Name your files with a .tsx extension"
- id: C2
  claim: TypeScript ships with several JSX modes.
  source: S1
  evidence: "TypeScript ships with several JSX modes: preserve, react (classic runtime), react-jsx (automatic runtime)"
- id: C3
  claim: Preserve mode keeps JSX for a later transform step.
  source: S1
  evidence: "The preserve mode will keep the JSX as part of the output to be further"
- id: C4
  claim: react-jsx emits _jsx calls optimized for production.
  source: S2
  evidence: "react-jsx: Emit .js files with the JSX changed to _jsx calls optimized for production"
- id: C5
  claim: preserve emits .jsx files with JSX unchanged.
  source: S2
  evidence: "preserve: Emit .jsx files with the JSX unchanged"

## Sources
- [S1] TypeScript: Documentation - JSX. TypeScript (Microsoft). https://www.typescriptlang.org/docs/handbook/jsx.html . License: CC BY 4.0 (microsoft/TypeScript-Website). Accessed 2026-11-04.
- [S2] TypeScript: TSConfig Option: jsx. TypeScript (Microsoft). https://www.typescriptlang.org/tsconfig/jsx.html . License: CC BY 4.0 (microsoft/TypeScript-Website). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).