My friend Bilal just started learning React and texted me last week completely confused. He was following a tutorial that kept switching between files ending in .ts and .tsx and had no idea what the difference was or why it mattered.

I explained it to him in about ten minutes. Here's that same explanation written down properly so you never have to wonder about this again.

The One-Line Answer

A .tsx file is a TypeScript source file that contains JSX, the XML-like syntax used to describe UI in React.

That's it. A TSX file is TypeScript plus JSX in one file. The extension tells the compiler exactly what kind of code it's dealing with.

If that still sounds like alphabet soup, keep reading. I'm going to break every piece of that down.

What TypeScript Is First

Before TSX makes sense, you need to understand TypeScript quickly.

TypeScript is JavaScript with types added on top. It's what's called a superset, meaning every valid JavaScript is also valid TypeScript. You just get extra tools on top.

The main thing TypeScript adds is static type checking. Instead of finding out at runtime that you passed a number where a string was expected, TypeScript catches that mistake while you're still writing code. Your code editor underlines the problem before you even save the file.

TypeScript files use the .ts extension. They contain types, interfaces, logic, utility functions, and anything that doesn't involve rendering UI elements.

What JSX Is

JSX stands for JavaScript XML. It's a syntax that lets you write HTML-like markup directly inside your JavaScript or TypeScript code.

JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are implementation-specific. JSX rose to popularity with the React framework but has since seen other implementations as well.

Here's the thing. Browsers don't understand JSX directly. A build tool like Vite or webpack converts it into plain JavaScript before anything reaches the browser. JSX is purely a developer convenience that makes writing UI code more readable.

Without JSX, creating a simple button in React looks like this in plain JavaScript:

js

React.createElement('button', { onClick: handleClick }, 'Click me')

With JSX it looks like this:

jsx

<button onClick={handleClick}>Click me</button>

Same result. Much easier to read. That's the whole value of JSX.

So What Is a TSX File Exactly

A TSX file is essentially a TypeScript file that allows the use of JSX syntax, making it ideal for building components in React with TypeScript. The .tsx extension stands for TypeScript JSX and it provides a powerful combination: JSX syntax for dynamic user interface design and TypeScript's static type-checking.

The X in TSX literally stands for the XML-like syntax that JSX uses.

The X in .tsx stands for XML-like syntax, which means you can write JSX inside these files. JSX is a way of writing HTML-like code directly in your JavaScript or TypeScript.

So when you see a .tsx file you immediately know two things. It's TypeScript. And it contains JSX markup for building UI components.

Why the Compiler Needs This Distinction

Here's something that surprises people. You can't just put JSX into any TypeScript file and expect it to work.

Every file containing JSX must use the .tsx file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX.

If you put JSX into a .ts file, the TypeScript compiler throws an error immediately. The JSX angle brackets conflict with TypeScript's own angle bracket syntax used for type assertions.

TypeScript also uses angle brackets for type assertions. Combining it with JSX's syntax would introduce certain parsing difficulties. As a result, TypeScript disallows angle bracket type assertions in .tsx files.

The .tsx extension is a signal to the compiler. It essentially says "parse this file differently, JSX is allowed here." Without that signal, the compiler gets confused and fails.

What a TSX File Actually Looks Like

Here's a real example so you can see what we're talking about.

tsx

// Greeting.tsx
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Let me break that down piece by piece.

The interface GreetingProps part is pure TypeScript. It defines the shape of the data this component expects. Here it says the name prop must be a string.

The React.FC<GreetingProps> part is TypeScript telling the compiler this is a React functional component that accepts GreetingProps as its props.

The return <h1>Hello, {name}!</h1> part is JSX. HTML-like syntax living inside TypeScript code.

This file needs to be .tsx not .ts because it contains that JSX return statement. The moment you write an angle bracket like that, the extension must be .tsx.

TSX vs TS: The Clear Distinction

Here's the rule that makes it simple.

Use .ts for logic and utilities or anything that's purely TypeScript. Use .tsx files when your code involves creating React components or writing JSX. If you need to mix TypeScript with HTML-like syntax, .tsx is the way to go.

Think of it this way:

A file that fetches data from an API? Pure TypeScript logic. Use .ts.

A file that defines a React button component? Contains JSX. Use .tsx.

A file with helper functions for formatting dates? No JSX. Use .ts.

A file that renders a list of items to the screen? Has JSX. Use .tsx.

TypeScript requires a special extension to distinguish files with JSX from those without, as JSX has unique parsing rules. The simple rule: JSX equals .tsx, no JSX equals .ts.

The Benefits of Using TSX Over Plain JSX

Here's the thing. Before TypeScript became standard, React components lived in .jsx files. They had the JSX but none of the type safety. So why did the industry move toward .tsx?

Catching Bugs Before They Happen

In TSX files, developers can create React components with type safety, reducing bugs and improving code readability, which is especially valuable in larger, collaborative projects.

When you define your component's props with TypeScript interfaces, the compiler immediately tells you if you're passing the wrong type of data. No more runtime errors because someone passed a number where a string was expected.

Better Editor Support

TypeScript-aware editors like VS Code give you significantly better autocompletion, inline documentation, and error highlighting in .tsx files compared to .jsx.

When you type a component name, VS Code knows exactly what props it accepts and what types they require. That's not possible without the type definitions that TypeScript provides.

Easier Refactoring

TypeScript's strong typing system makes it easier to refactor and scale projects over time. This is particularly helpful in larger applications where components may be reused or modified frequently. The clear typing and structure of TSX files reduce the risk of breaking existing functionality during updates.

In a large codebase with dozens of components, changing the props of one component and having the compiler immediately flag every place that component is used incorrectly is genuinely valuable. Without types, you'd have to manually search for every usage and hope you didn't miss one.

How TSX Fits Into a React Project Structure

Here's what a typical React and TypeScript project folder looks like when people are using these conventions properly.

src/
  components/
    Button.tsx        ← JSX component, .tsx
    Modal.tsx         ← JSX component, .tsx
  hooks/
    useAuth.ts        ← Custom hook, no JSX, .ts
    useFetch.ts       ← Utility hook, no JSX, .ts
  utils/
    formatDate.ts     ← Helper function, .ts
    apiClient.ts      ← API logic, .ts
  types/
    user.ts           ← Type definitions, .ts
  App.tsx             ← Root component with JSX, .tsx

The pattern is clear when you see it. Everything that renders UI is .tsx. Everything that handles logic, data, or utilities is .ts.

In larger projects, .tsx files should only be used for React components or layout code. Mixing utility functions into these files clutters them and slows down refactoring. A dedicated folder for helpers and hooks keeps the component layer clean.

The tsconfig.json Connection

Here's the configuration piece that makes TSX work. Every TypeScript project has a file called tsconfig.json that tells the TypeScript compiler how to behave.

For TSX support to work, the jsx option in tsconfig.json needs to be set correctly. The most common values are react-jsx for modern React 17 and later projects, and react for older projects using the classic JSX transform.

TypeScript ships with several JSX modes: preserve, react classic runtime, react-jsx automatic runtime, react-jsxdev automatic development runtime, and react-native.

Most modern projects use react-jsx which means you don't need to import React at the top of every component file. The automatic runtime handles it. Older projects using the react setting require import React from 'react' in every .tsx file.

When you set up a React TypeScript project with a tool like Vite or Create React App, these settings are configured automatically. But knowing they exist helps when something breaks or when you're setting up a project from scratch.

Common Mistakes People Make With TSX Files

Let me break down the errors Bilal kept running into because they're universal.

Putting JSX in a .ts File

This is the most common mistake. You create a file, start writing a component, include JSX, and the compiler immediately throws an error. The fix is always the same. Rename the file from .ts to .tsx.

Putting Logic in a .tsx File When It Doesn't Need JSX

The opposite problem. Some developers put everything in .tsx files because they've seen others do it. This works technically but it's bad practice. Files without JSX don't need the .tsx extension and using it everywhere makes the file structure less clear.

Forgetting Type Definitions for Props

The whole point of .tsx over .jsx is type safety. Skipping the interface or type definition for your component's props defeats that purpose. Always define the shape of your props explicitly.

tsx

// Missing types - bad practice
const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};

// With types - correct
interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button = ({ label, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

TSX and Other Frameworks Beyond React

Here's something worth knowing as you learn more. TSX isn't exclusively a React thing.

JSX rose to popularity with the React framework but has since seen other implementations as well.

Frameworks like Preact, Solid.js, and Qwik all support JSX syntax and TypeScript. The .tsx extension works the same way in those environments. You're writing typed components with HTML-like syntax regardless of which framework is underneath.

In 2026, the React and TypeScript combination is by far the most common use case for .tsx files. But the concept transfers to other modern frameworks as you branch out.

How This Relates to Other Technical Fundamentals

Understanding TSX is part of building solid frontend development knowledge. The file extension system, compiler configuration, and syntax rules all connect to deeper concepts about how computers parse and process code.

It's the same kind of foundational thinking that applies when you understand how a computer initializes hardware at startup. If you want to go deeper on how computers handle low-level startup processes before any software even loads, the article on what is power on covers the POST sequence and how machines verify hardware before the OS takes over. Different layer of computing, same idea of understanding what the machine is actually doing before you start writing application code.

The Official Reference Worth Bookmarking

The most authoritative source for understanding TSX and JSX in TypeScript is the TypeScript documentation on JSX, which covers the compiler options, syntax rules, and type checking behavior in full detail. Worth bookmarking if you're building React TypeScript projects seriously.

FAQs

What is a TSX file?

A .tsx file is a TypeScript file that supports JSX syntax, used for building React components with type safety.

What is the difference between .ts and .tsx?

Use .ts for pure TypeScript logic with no JSX. Use .tsx for any file that contains JSX markup for React components.

Can I use JSX in a .ts file?

No. TypeScript only allows JSX syntax in files with the .tsx extension. Putting JSX in a .ts file causes a compiler error.

Do I always need .tsx for React components?

Yes, if the component returns JSX you must use .tsx. If a React file has no JSX at all, .ts is fine.

What does TSX stand for?

TSX stands for TypeScript JSX, where the X represents the XML-like syntax that JSX uses for writing HTML-like code in TypeScript.