TS vs TSX: How to Structure Files For Cleaner Code

Confused about the difference between .ts and .tsx in React? TypeScript (.ts) handles logic and type safety, while TSX (.tsx) lets you mix TypeScript with JSX for building UI components. This blog breaks down their roles, how they fit into a project, and when to use each for cleaner, scalable code.

Developers often ask a simple but loaded question: When should I use .ts files and when should I use .tsx files in a React project?

If you've been switching between them without much thought, your project might already be carrying unnecessary complexity.

Want to know how this choice affects readability, scalability, and team collaboration?

This blog explains the differences clearly. It walks through React components, the role of TSX files, and why the right file extension can make your TypeScript code more maintainable. You’ll also see practical examples, a diagram, and structured recommendations to help you keep your codebase clean and future-proof.

What are .ts Files?

A .ts file is simply a TypeScript file that does not contain JSX syntax. Think of it as a place for utility functions, type definitions, data models, or static typing helpers. It’s where you write logic that doesn’t directly render user interfaces. If you were to open a .ts file in a text editor, you would see plain TypeScript code, not HTML-like markup.

Developers use .ts files for:

• TypeScript code without JSX elements
• Shared interfaces and define types
• API request functions
• Reusable data processing logic
• Scripts that run without rendering a component

What are .tsx Files?

Atsx file is a TypeScript file that supports JSX syntax. This is necessary when defining a React component . JSX stands for JavaScript XML, a way to write JSX elements directly inside your TypeScript code. If you’re building user interfaces with React and TypeScript, you’ll almost always have .tsx files in your project.

Developers create .tsx files for:

• React components (functional or class components)
• UI logic and building user interfaces
• Rendering layouts and passing parameters via props
• Components that consume and display data

Copy
1
2
3
4
5
6
7
8
9
10
11
12
// components/Greeting.tsx
import React from 'react';

interface MyComponentProps {
  name: string;
}

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

export default MyComponent

Explanation: This uses JSX syntax inside a TypeScript file. It renders user interfaces and follows the .tsx file extension rule for React components.

Difference Between .ts and .tsx

Tip: If your file contains even a single JSX element, it should use the .tsx extension.

Why .tsx is Needed for React Components

Every React component that returns JSX syntax needs to be inside a .tsx file. Without it, the compiler throws an error because .ts doesn’t parse JSX. For example, a functional component using <div> tags will fail in .ts format but succeed in .tsx.

Think of .tsx files as the file type that marries TypeScript with JavaScript XML. It lets you combine strong type checking with expressive UI declarations. You get both structure and flexibility in the same file.

Folder & File Structuring in a Project

A clean project structure helps developers navigate files faster and prevents confusion between .ts and .tsx.

Here’s a recommended layout:

Copy
1
2
3
4
5
6
7
8
9
src/
  components/
    Header.tsx
    Footer.tsx
  utils/
    formatDate.ts
    parseData.ts
  types/
    index.ts

Explanation:

• components/ → Holds .tsx files for rendering user interfaces
• utils/ → Contains .ts files for helper logic
• types/ → Central place to define types and interfaces

Choosing Between .ts and .tsx

Explanation: This diagram shows the decision-making process for choosing between .ts and .tsx. By asking one question — "Does it contain JSX syntax?" — you can decide instantly which file extension to use.

The Role of JSX Syntax

JSX syntax blends the structure of HTML with the power of JavaScript. When written inside TypeScript files, it needs a .tsx extension.

Key points:

• JSX elements must live inside .tsx files
• You can pass parameters and data directly in markup
• It makes building user interfaces easier
• It allows composition of multiple components

Copy
1
const MyComponent = () => { return <div>Sample JSX output</div>; };

If you save this in a .ts file, you’ll face an error. The compiler will flag the <div> as unexpected syntax.

When is .ts Better?

Sometimes developers mistakenly put non-UI code inside .tsx files. That leads to unnecessary compiler work and mixes unrelated concerns. It’s better to keep .ts files for logic that doesn’t involve rendering.

Use .ts files for:

• Interfaces like interface MyComponentProps
• TypeScript code without rendering
• Functions processing data
• A different test environment setup
• Existing projects cleanup

Copy
1
export interface MyComponentProps { title: string; count: number; }

This is also the ideal place to store constants, enums, and configuration objects.

TSX Files and React Components in Large Projects

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.

Best practice:

• Keep one React component per .tsx file
• Move helpers to .ts files
• Keep file extensions consistent
• Group files by feature, not just by type, in large-scale codebases

Using TSX File Extension vs JSX File Extension

The .tsx file extension works just like .jsx file extension, except it supports TypeScript features. Both allow JSX syntax, but .tsx adds static typing and type checking.

This means you can define prop types and get compiler-level feedback before runtime. It’s one of the strongest reasons to adopt .tsx in modern React projects.

Example: Combining .ts and .tsx

Copy
1
// utils/math.ts export function add(a: number, b: number) { return a + b; } // components/Calculator.tsx import React from 'react'; import { add } from '../utils/math'; const MyComponent = () => { return <div>Sum: {add(2, 3)}</div>; }; export default MyComponent;

Explanation: The .ts file holds the math function. The .tsx file renders the React component with JSX syntax.

But what if you could build a React app without touching code at all?

Rocket.new lets you create production-ready React applications using simple text prompts — no code required. You describe the app you want, and Rocket builds the application for you.

Start Building Now!

Testing Considerations

When setting up a test environment, keep .ts files and .tsx files separate for clarity. This helps when switching to a different test environment or adding different plugins. It also makes test coverage reporting cleaner because UI and logic are measured independently.

Choosing the Right Extension for ts vs tsx

Use .ts for handling logic. Use .tsx for UI that includes JSX. This approach keeps your code organized. It makes React components easier to update and review. Clear file separation also helps new developers understand the structure faster. Over time, this consistency reduces bugs and improves collaboration. By keeping the right extension for the right purpose, your project stays easier to read, faster to debug, and smoother to scale.