← All notes

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

Setup

{ "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

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).

@misc{iil_note_fg5y18tx,
  author = {{iinventedlight}},
  title = {{JSX in TypeScript}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/typescript-jsx/},
  note = {Permanent ID iil:note:fg5y18tx. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/typescript-jsx.md.