What is a .tsx file?
TypeScript React Source File · Code and data · Microsoft / Meta · 2016
A .tsx file is TypeScript that includes JSX, the HTML-like syntax used to describe React components. It is the standard file type for building typed React user interfaces.
What is a .tsx file used for?
TSX lets you write markup and typed logic together, so a React component's structure and its props are checked by the compiler. It compiles to plain JavaScript that the browser runs.
It is the go-to format for modern React apps built with TypeScript. The files are plain text; VS Code with the built-in TypeScript support is the usual editor.
How to open a .tsx file
The .tsx format opens in the following apps, grouped by operating system. If one app does not work, try another from the same list. For a step-by-step walkthrough, see how to open a .tsx file.
Windows
- VS Code
- WebStorm
- any text editor
macOS
- VS Code
- WebStorm
- any text editor
Linux
- VS Code
- vim
- any text editor
How to convert a .tsx file
You can convert a .tsx file to js using a conversion tool or the export menu of an app that opens it.
.tsx file signature (magic bytes)
Programs recognise a .tsx file by the bytes at the start of the file, not by its name. These are the signatures for TSX.
| Hex signature | Offset | Note |
|---|---|---|
| (no fixed signature) | 0 | plain text; no fixed magic bytes |
See the full magic-numbers reference for every format.
Frequently asked questions
What is a .tsx file?
A .tsx file is TypeScript that includes JSX, the HTML-like syntax used to describe React components. It is the standard file type for building typed React user interfaces.
What is the difference between .ts and .tsx?
Both are TypeScript. A .tsx file can contain JSX markup for React components; a .ts file cannot. Use .tsx whenever a file returns JSX.
How do I open a .tsx file?
Any text editor works, but VS Code gives full TypeScript and React support with highlighting and error checking.
Do I need React to use .tsx?
In practice yes. The JSX syntax in .tsx files is designed for React (or compatible libraries), which turns it into UI.
Related formats
Sources
Details on this page were checked against authoritative references: