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.
What opens 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.
Windows
- VS Code
- WebStorm
- any text editor
macOS
- VS Code
- WebStorm
- any text editor
Linux
- VS Code
- vim
- any text editor
Open a .tsx file step by step
- Confirm the file really is a .tsx. Drop it into the WhatFileType identifier, which reads its signature in your browser without uploading anything.
- On Windows, open it with VS Code or WebStorm.
- On Mac, use VS Code or WebStorm.
- On Linux, try VS Code or vim.
- Still stuck? Convert the .tsx to js, which opens more widely.
Why can't I open my .tsx file?
Almost always because no installed app understands TSX. Install one of the apps above, or convert the file to a format your existing software already reads. If double-clicking opens the wrong program instead of nothing at all, the file association is set to the wrong app rather than the file being broken.
The other possibility is that the file is not really a .tsx at all. Drop it into the file identifier to check it by its bytes instead of its name. Nothing is uploaded.
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 has no fixed magic number, so there is no signature table on this page. Its bytes alone do not prove the format: identification relies on the extension, the structure of the content and the program that created it. The magic-numbers reference lists the formats that do carry one.
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. How sources are ranked and what is deliberately left out is set out in the methodology.