Understanding the Difference Between .ts and .tsx in TypeScript: When to Use Each

TypeScript has gained popularity in modern web development for adding static types to JavaScript, enhancing code quality and reducing errors. For developers using React, it's essential to understand the difference between .ts and .tsx file extensions.

This article clarifies when and why to use each extension, helping you improve code organization and compatibility with JSX and React components. Knowing the differences between .ts and .tsx is vital for creating type-safe React applications and maintaining a clean, error-free codebase. Let’s explore further!

What is TypeScript?

TypeScript is a robust superset of JavaScript created by Microsoft. It enhances JavaScript with static types and advanced features for safer, more maintainable code. TypeScript compiles to standard JavaScript, ensuring any valid JavaScript is also valid TypeScript while providing additional development tools.

When working with TypeScript, it's important to understand the differences between file extensions like .ts and .tsx. These extensions determine how TypeScript will process your code and play a crucial role in organizing your codebase, especially when working with frameworks like React. Let's break down the two file extensions and their respective use cases.

The `.ts` (TypeScript File) Extension

A .ts file is a standard TypeScript file used to write TypeScript code without JSX. It is used for general TypeScript logic, such as utilities, classes, backend code, and types.

Use Cases:

General TypeScript Logic: .ts files are commonly used for writing functions, classes, and types that do not involve JSX (the syntax used for React components).
Backend Code: TypeScript is often used in Node.js applications for backend logic, such as APIs, services, and database integrations. These files typically have a .ts extension.
Utility Functions: Functions like data manipulation, calculations, or formatters can be written in .ts files.
Defining Types and Interfaces: .ts files are ideal for defining interfaces, types, enums, and other TypeScript-specific constructs that provide static typing.

Example of `.ts` File:

// utils.ts
export function calculateSum(a: number, b: number): number {
  return a + b;
}

export interface User {
  name: string;
  age: number;
}

The `.tsx` (TypeScript XML File) Extension

A .tsx file is a TypeScript file that includes JSX syntax, commonly used in React applications. JSX is a syntax extension that allows you to write HTML-like code within JavaScript (or TypeScript) files, typically used to define React components.

Role in React Applications:

React and TypeScript: When using TypeScript with React, you need to use the .tsx extension because JSX needs to be compiled into React's createElement calls, which TypeScript will handle.
Combining TypeScript and JSX: .tsx files allow you to mix TypeScript with JSX, enabling strong type-checking while building interactive UI components in React.

Example of `.tsx` File:

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

interface ButtonProps {
  label: string;
  onClick: () => void;
}

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

export default Button;

By understanding the distinction between .ts and .tsx, developers can organize their projects more efficiently, ensuring that files are parsed correctly and that TypeScript's static type-checking works seamlessly with JSX when needed.

When to Use `.ts`

The .ts extension should be used in the following cases where JSX is not involved:

No JSX or React Code: Any TypeScript code that does not contain JSX (HTML-like syntax used in React) should be written in a .ts file. This includes general TypeScript logic, type definitions, utility functions, and backend code.

Examples of `.ts` Usage:

Utility Functions: TypeScript files that contain general utility functions for business logic, data manipulation, or any non-UI functionality.

 // utils.ts
 export function calculateSum(a: number, b: number): number {
   return a + b;
 }

 export function fetchData(url: string): Promise<any> {
   return fetch(url).then((response) => response.json());
 }

Here, .ts is used because the code does not include JSX. The functions are written in pure TypeScript.

Type Definitions: TypeScript allows you to define types and interfaces, which can be used to ensure that data structures adhere to a specific shape.
```
 // types.ts
 export interface Product {
   id: number;
   name: string;
   price: number;
 }

 export type OrderStatus = "pending" | "completed" | "shipped";
```
Type definitions like interfaces and types are written in .ts files since they don't require JSX.
Server-Side Logic: If you're building backend services or APIs using TypeScript, these files will typically be written in .ts.
```
 // server.ts
 import express from 'express';

 const app = express();

 app.get('/api/products', (req, res) => {
   res.send({ message: "Products list" });
 });

 app.listen(3000, () => {
   console.log("Server is running on port 3000");
 });
```
This file contains server-side logic (e.g., API endpoint creation) using TypeScript. Since there is no JSX involved, it is saved with the .ts extension.

When to Use `.tsx`

The .tsx extension is used when you need to combine JSX syntax with TypeScript, which is common in React applications.

React Components: .tsx is necessary when writing React components in TypeScript that include JSX. This file extension allows TypeScript to correctly parse and type-check both the TypeScript code and the JSX code.
JSX Syntax: JSX allows you to write HTML-like code within JavaScript/TypeScript, and TypeScript can be used to type-check this code. Since JSX is not valid TypeScript syntax by itself, .tsx is required to handle both TypeScript and JSX in one file.

Examples of `.tsx` Usage:

React Component with JSX: When building a UI component in React using TypeScript and JSX, the file should be a .tsx file.
```
 // Button.tsx
 import React from 'react';

 interface ButtonProps {
   label: string;
   onClick: () => void;
 }

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

 export default Button;
```
In this case, the React component uses JSX to render HTML-like elements inside the TypeScript file, making it necessary to use the .tsx extension. TypeScript ensures type safety for the props (ButtonProps) as well.

UI-related Logic Combining TypeScript and JSX: When building interactive UI elements or components that involve TypeScript for logic and JSX for rendering UI, you should use .tsx files.

 // App.tsx
 import React, { useState } from 'react';
 import Button from './Button';

 const App: React.FC = () => {
   const [count, setCount] = useState(0);

   const handleClick = () => setCount(count + 1);

   return (
     <div>
       <h1>Count: {count}</h1>
       <Button label="Increment" onClick={handleClick} />
     </div>
   );
 };

 export default App;

This React component (App.tsx) includes both TypeScript logic (e.g., state management) and JSX (e.g., HTML-like markup), requiring the .tsx extension to handle both properly.

How They Impact Code

JSX Parsing:
- .ts does not support JSX syntax; trying to use JSX in a .ts file will cause a syntax error.
- .tsx allows embedding JSX syntax directly into the code.
Compilation:
- When a .tsx file is compiled, TypeScript transforms the JSX into valid JavaScript, typically calling React.createElement.
Code Organization:
- Using .tsx for React components keeps the code cleaner and makes it easier to distinguish UI logic from other logic.

Common Mistakes to Avoid

When working with TypeScript and React, it’s easy to make mistakes regarding file extensions and code organization. Below are some of the most common pitfalls developers encounter, along with guidance on how to avoid them.

1. Using `.ts` for React Components

The Mistake: One of the most common mistakes is using the .ts file extension for React components that contain JSX. Since .ts is meant for TypeScript code that does not include JSX, trying to include JSX in a .ts file will result in a syntax error.
Why It Happens: Developers may forget that JSX must be handled separately in TypeScript, requiring the .tsx extension for files that include JSX syntax.
What to Do: Always use the .tsx extension when working with React components that use JSX. This tells TypeScript to correctly parse both the TypeScript code and the JSX elements, allowing for proper type-checking and avoiding syntax errors.

Example:

// Incorrect: Using .ts for a React component with JSX
// Button.ts
import React from 'react';

const Button: React.FC = () => {
  return <button>Click me</button>; // Error: JSX is not allowed in a .ts file
};

Solution: Change the file extension to .tsx.

// Correct: Using .tsx for a React component
// Button.tsx
import React from 'react';

const Button: React.FC = () => {
  return <button>Click me</button>; // No error
};

2. Forgetting to Use `.tsx` for JSX

The Mistake: Another frequent error is forgetting to use .tsx when the file includes JSX. TypeScript requires the .tsx extension for files containing JSX because it needs special handling to parse and type-check the JSX syntax.
Why It Happens: Developers may unintentionally save their React components as .ts files, forgetting that JSX code will cause TypeScript to throw errors during compilation.
What to Do: Always use .tsx when working with React or any other framework that uses JSX. This is essential for both the JSX syntax to be valid and for the TypeScript compiler to provide type safety.

Example:

// Incorrect: Missing .tsx extension for JSX
// MyComponent.ts
const MyComponent = () => {
  return <div>Hello, World!</div>; // Error: JSX not allowed in .ts files
};

Solution: Save the file with the .tsx extension.

// Correct: Using .tsx for a React component with JSX
// MyComponent.tsx
const MyComponent = () => {
  return <div>Hello, World!</div>; // No error
};

3. Confusing Backend Logic with React UI

The Mistake: A common confusion arises when developers mix backend logic and React UI code in the same context. For example, writing backend logic in a .tsx file by mistake or treating frontend React components as backend code.
Why It Happens: Developers may incorrectly associate both backend and frontend logic with the same file extensions, especially when working on full-stack applications. However, the distinctions between the frontend (React UI) and the backend (API endpoints, server-side logic) should be maintained for clarity and organization.
What to Do: Always keep backend logic (API routes, database logic, etc.) in .ts files, as they do not require JSX. Use .tsx files exclusively for React components that contain JSX. Mixing these concerns can lead to confusion and improper organization.

Example:

// Incorrect: Mixing backend and frontend logic in the same file
// app.tsx (should be .ts)
import React from 'react';

const app = () => {
  // Backend logic inside React component
  fetchDataFromAPI().then((data) => {
    console.log(data);
  });

  return <div>Hello World</div>;
};

Solution: Separate backend logic and React components into distinct files.

// Correct: Backend logic in .ts, React component in .tsx
// backendLogic.ts (for server-side logic)
export function fetchDataFromAPI() {
  return fetch('https://api.example.com/data').then((response) => response.json());
}

// app.tsx (for React component)
import React from 'react';
import { fetchDataFromAPI } from './backendLogic';

const App: React.FC = () => {
  React.useEffect(() => {
    fetchDataFromAPI().then((data) => {
      console.log(data);
    });
  }, []);

  return <div>Hello World</div>;
};

Key Points to Decide

Does the file contain JSX or React components?
- Yes → Use .tsx.
- No → Use .ts.
Is the file only TypeScript logic, types, or backend code?
- Yes → Use .ts.
Is the file UI-related or does it mix JSX and TypeScript?
- Yes → Use .tsx.

Conclusion

In this article, we explored the key differences between the .ts and .tsx file extensions in TypeScript .ts is used for TypeScript files that do not contain JSX (e.g., utility functions, type definitions, backend logic). .tsx is used for TypeScript files that include JSX syntax, typically when working with React components, where JSX is mixed with TypeScript code.

Mastering the distinction between .ts and .tsx will lead to cleaner and more maintainable code. By properly organizing your files and choosing the right extension for your specific needs, you’ll not only avoid errors and confusion but also improve the readability and structure of your project. This is especially important when working with React and TypeScript, where maintaining clear boundaries between logic and UI components is essential for scalability and long-term maintainability.

Thanks!

Happy Coding!

Understanding the Difference Between .ts and .tsx in TypeScript: When to Use Each

What is TypeScript?

The .ts (TypeScript File) Extension

Example of .ts File:

The .tsx (TypeScript XML File) Extension

Example of .tsx File:

When to Use .ts

Examples of .ts Usage:

When to Use .tsx

Examples of .tsx Usage:

How They Impact Code

Common Mistakes to Avoid

1. Using .ts for React Components

Example:

2. Forgetting to Use .tsx for JSX

Example:

3. Confusing Backend Logic with React UI

Example:

Key Points to Decide

Conclusion

The `.ts` (TypeScript File) Extension

Example of `.ts` File:

The `.tsx` (TypeScript XML File) Extension

Example of `.tsx` File:

When to Use `.ts`

Examples of `.ts` Usage:

When to Use `.tsx`

Examples of `.tsx` Usage:

1. Using `.ts` for React Components

2. Forgetting to Use `.tsx` for JSX