TSX (TypeScript XML — React)
TSX combines TypeScript's static typing with JSX syntax for React components. It is the standard file extension for typed React components, providing compile-time type checking for props, state, and event handlers.
MIME Type
text/tsx
Type
Text
Compression
Lossless
Advantages
- + Type-safe React components with prop validation at compile time
- + Excellent IDE autocomplete for props and event handlers
- + Catches common React bugs before runtime
Disadvantages
- − Requires TypeScript compiler configuration
- − Generic component syntax can conflict with JSX angle brackets
- − More boilerplate than plain JSX for simple components
When to Use .TSX
Use TSX for all React components in TypeScript projects — it provides type safety for props, state, context, and hooks.
Technical Details
TSX files are processed by the TypeScript compiler, which type-checks the code and transforms JSX into JavaScript. Generic components use angle brackets that the compiler distinguishes from JSX elements.
History
TSX emerged naturally from the combination of TypeScript and JSX as React and TypeScript gained popularity together. By 2020, TSX became the default for new React projects using TypeScript.