Difference Between .ts and .tsx in React TypeScript

By the end of this page, you will understand the difference between .ts and .tsx files in TypeScript projects, especially in React. You will learn when to use each extension, why the distinction matters, and how developers typically organize these files in real codebases.

TypeScript uses different file extensions to tell the compiler what kind of syntax may appear inside a file.

• .ts means a regular TypeScript file
• .tsx means a TypeScript file that may contain JSX

JSX is the HTML-like syntax commonly used in React, such as:

const element = <h1>Hello</h1>;

That syntax is not plain TypeScript. Because of that, TypeScript needs a special file extension: .tsx.

When to use .ts

Use .ts for files that contain TypeScript code without JSX.

Examples:

• utility functions
• API helpers
• data transformation logic
• type definitions
• custom hooks that do not return JSX
• constants and configuration

Example:

export function add(a: number, b: number): number {
  return a + b;
}

When to use .tsx

Think of the file extension as a label on a box.

• A .ts box says: This box contains TypeScript only
• A .tsx box says: This box may contain TypeScript plus React-style markup

If you try to put JSX markup into a .ts box, the compiler gets confused because the label says it should only expect regular TypeScript.

So the extension is not just naming style. It tells the tools how to read the file.

Here is the basic idea.

.ts example

Use .ts for logic-only files:

// math.ts
export function multiply(a: number, b: number): number {
  return a * b;
}

This file contains only TypeScript. There is no JSX.

.tsx example

Use .tsx for React components that render JSX:

// Button.tsx
type ButtonProps = {
  label: string;
};

export function Button({ label }: ButtonProps) {
  return <button>{label}</button>;
}

This file must be .tsx because it returns JSX.

Consider this file:

type Props = {
  name: string;
};

export function Greeting({ name }: Props) {
  return <h1>Hello, {name}</h1>;
}

Here is what happens step by step:

1. type Props = { name: string; };

   • A TypeScript type is created.
   • It says the component expects one prop called name, and it must be a string.

2. export function Greeting({ name }: Props)

   • A function component is declared.
   • The parameter is checked against the Props type.

3. return <h1>Hello, {name}</h1>;

   • This returns JSX.
   • Because JSX is present, the file must use the .tsx extension.

4. TypeScript and the React tooling parse the file as TSX.

Here are common real-world cases.

Use .ts for

• API clients
  • functions that call fetch or axios
• utility functions
  • date formatting, math helpers, string cleanup
• type definitions
  • shared interfaces and type aliases
• state logic without JSX
  • reducers, selectors, validation rules
• configuration files
  • route config, environment parsing, constants
• custom hooks without JSX
  • hooks that only return values and functions

Example:

export async function getUsers() {
  const response = await fetch('/api/users');
  return response.json();
}

Use .tsx for

• React components

In real projects, developers usually keep a clean separation between presentation and logic.

Common pattern

• .tsx files handle rendering
• .ts files handle logic, data shaping, and reusable helpers

Example structure:

src/
  components/
    UserCard.tsx
    Navbar.tsx
  hooks/
    useUsers.ts
  utils/
    formatDate.ts
    validateEmail.ts
  types/
    user.ts
  api/
    users.ts

Typical usage patterns

Guard clauses in .tsx

Components often use guard clauses before rendering:

type Props = {
  isLoading: boolean;
  name?: string;
};

export function ProfileHeader({ isLoading, name }: Props) {
  if (isLoading) return <p>Loading...</p>;
  if (!name) return <p>No user found;

   ;
}

Here are some common beginner mistakes.

1. Using .ts for a component that returns JSX

Broken example:

export function App() {
  return <h1>Hello</h1>;
}

Why it fails:

• The file contains JSX.
• .ts files are not meant to parse JSX.

Fix:

• Rename the file to .tsx

export function App() {
  return <h1>Hello</h1>;
}

2. Assuming all React files must be .tsx

This is not necessary.

Example:

import { useState }  ;

  () {
   [value, setValue] = ();
   { value, setValue };
}

Here is the practical comparison.

.ts vs .tsx

• Use .ts for TypeScript files with no JSX
• Use .tsx for TypeScript files that contain JSX
• React components that return JSX are usually .tsx
• Utility files, type files, API files, and many hooks are usually .ts

Quick rule

No JSX  -> .ts
Has JSX -> .tsx

Examples

export function sum(a: number, b: number) {
  return a + b;
}

export function Header() {
  return <header>Site Header</header>;
}

Common file types

• Button.tsx -> component
• UserList.tsx -> component

What is .tsx in TypeScript?

.tsx is a TypeScript file extension used for files that contain JSX, which is commonly used in React components.

What is the difference between .ts and .tsx?

.ts is for regular TypeScript code without JSX. .tsx is for TypeScript code that includes JSX.

Should all React files be .tsx?

No. Only files that contain JSX need .tsx. Logic-only files in a React project can stay as .ts.

Can I use hooks in a .ts file?

Yes. If the file uses hooks like useState or useEffect but does not return JSX, .ts is fine.

Can I write a React component in a .ts file?

Only if it does not contain JSX. In practice, most React components return JSX, so they should usually be .tsx.

What happens if I put JSX in a file?

• JSX — .tsx exists because JSX syntax needs special parsing.
• React components — most component files use .tsx because they render UI.
• TypeScript types — shared interfaces and type aliases are commonly stored in .ts files.
• Custom hooks — hooks are often .ts unless they contain JSX.
• TypeScript compiler — file extensions help the compiler parse code correctly.
• Props in React — props are often typed in .tsx component files.
• Modules and imports — both .ts and .tsx are module files in modern TypeScript projects.