.tsx

What is a .tsx file?

TSX is a TypeScript file containing JSX — React components with type safety, the standard for typed React development.

Use caution
Type Code
By Microsoft / Meta
MIME text/typescript-jsx

Drop any file to identify it

No upload. No signup. No sending your file halfway across the internet.
We tell you what it is, right here in your browser.

What is it

You're looking at a .tsx file — TypeScript with JSX. It combines React's component syntax with TypeScript's type system, and it's become the standard way to build React applications in professional settings. If a React project was started after 2020, it's probably TSX.

TSX gives you everything JSX offers (writing HTML-like syntax in your code) plus compile-time type checking. Your IDE can tell you that you passed a number where a string was expected, that a required prop is missing, or that a function returns the wrong type — before you run the code. This catches bugs that would otherwise surface at runtime as cryptic error messages or silent failures.

VS Code provides first-class TSX support — it's built on TypeScript, so the integration is seamless. Any text editor can open the file since it's plain text. TSX needs compilation (TypeScript compiler, esbuild, or Vite) before browsers can run it. For new React projects, `npm create vite@latest myapp -- --template react-ts` sets up a TSX project with modern tooling in about ten seconds.

Technical details
Full Name
TypeScript JSX
MIME Type
text/typescript-jsx
Developer
Microsoft / Meta
Magic Bytes
N/A
Safety
.tsx requires caution. Source code files can execute arbitrary code. Only run code from trusted sources.
What opens it
VS Code
FREE All
Any text editor
FREE All
FAQ
Should I use TSX or JSX for a new React project?
TSX. TypeScript catches entire categories of bugs at compile time and provides dramatically better IDE support (auto-completion, refactoring, documentation). The learning curve is mild and the benefits are immediate.
Can I gradually add TypeScript to a JSX project?
Yes. Rename .jsx files to .tsx one at a time. TypeScript is a superset of JavaScript — your existing code works immediately. Add type annotations incrementally. Most teams migrate file by file over weeks or months.
Related formats