.tsx File Extension

What kind of file is a .tsx?

A .tsx file contains TypeScript source with JSX, the XML-like syntax commonly used to describe user interfaces. TypeScript uses this suffix to distinguish source that may contain JSX from an ordinary .ts file. The compiler requires both the .tsx suffix and an enabled jsx option to process JSX syntax.¹

TSX is most familiar in React projects, but JSX is not exclusive to React. Its runtime meaning depends on the project's compiler settings, JSX library, imports, and type declarations. React's TypeScript guide says every React file containing JSX must use .tsx.²

There is no magic byte sequence for TSX. It is text, so confirming the format requires a TypeScript-aware parser and the surrounding project configuration. The suffix also has no dedicated IANA-registered MIME type.

How do I open a .tsx on my computer?

Open .tsx files on Windows, macOS, Linux, or ChromeOS with a code editor such as Visual Studio Code, WebStorm, Visual Studio, or Sublime Text. Visual Studio Code recognizes TSX as the typescriptreact language mode and provides TypeScript language features.³

To check or build a file, use the repository's documented scripts and tsconfig.json. A typical project-wide type check is:

npx tsc --noEmit

The correct command may instead use a framework or another build tool. Review package scripts and dependencies before running an unfamiliar project because source code, plugins, and install scripts can access resources available to their process.

Poly support for .tsx

Poly opens .tsx source in a read-only code editor with syntax highlighting, word wrap, and in-file search. Its readable text is indexed for exact and semantic search. The Poly agent can summarize components, explain props and state, and reason about the source without executing it.

Poly does not run the application, install packages, type-check the project, or resolve every import automatically. Keep tsconfig.json, dependency manifests, type declarations, styles, and related modules alongside the file when those details are important.

History of .tsx

Microsoft introduced the new .tsx extension with TypeScript 1.6 in September 2015. That release added React and JSX support so JSX syntax and TypeScript types could coexist in one file.⁴

The separate suffix also resolves a parsing ambiguity. Angle brackets can begin either JSX or an older TypeScript type assertion, so .tsx files must use the value as Type assertion style rather than <Type>value.¹

Working with .tsx and alternatives

Choose a suffix that matches the syntax and configured toolchain:

TypeScript can emit different JavaScript depending on the jsx compiler option. For example, preserve leaves JSX for another transformation step and emits .jsx, while react-jsx transforms JSX and emits .js.¹ The output is generated code, not a renamed copy.

Converting .jsx to .tsx often requires typing component props, resolving implicit types, and aligning library declarations. Converting .tsx to JavaScript removes TypeScript-only syntax during compilation, but the result still depends on the chosen JSX runtime and module target.