243

I am new to react and I am working on a project. I come across both .ts and .tsx extensions. I don't understand where should I use .ts and .tsx. Any help on this is much appreciated. Thank you!

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Hafsa Mushtaq
  • 2,591
  • 2
  • 8
  • 13
  • 3
    Possible duplicate of https://stackoverflow.com/questions/34224007/is-there-any-downside-to-using-tsx-instead-of-ts-all-the-times-in-typescript –  Jul 03 '19 at 13:34
  • Roughly I use .ts files for plain scripts and .tsx for files containg markup – Mangs Jul 03 '19 at 13:38
  • same as difference between c and c++ :p – Ubiquitous Developers Jul 03 '19 at 13:53
  • Does this answer your question? [Is there any downside to using .tsx instead of .ts all the times in typescript?](https://stackoverflow.com/questions/34224007/is-there-any-downside-to-using-tsx-instead-of-ts-all-the-times-in-typescript) – GorvGoyl Jun 17 '20 at 00:12

7 Answers7

357

Use .ts for pure TypeScript files.

Use .tsx for files which contain JSX.

For example, a React component would be .tsx, but a file containing helper functions would be .ts.

friederbluemle
  • 33,549
  • 14
  • 108
  • 109
liamgbs
  • 3,978
  • 1
  • 8
  • 19
  • 13
    To add to this (correct) answer, it's the same as if you were doing React without TypeScript, you would use .js and .jsx for pure javascript vs JSX javascript files. – Cal Irvine Jul 03 '19 at 13:50
  • 1
    not necessarily, you can write pure TS React components, I'd reword it as: a react component containing "tag like" react syntax (which is really tsx). Just to clarify that to anyone that doesn't really know about it. – sab Oct 14 '20 at 07:54
  • 5
    I spent many hours figuring out why my .ts files keep throwing errors for things like `return
    hello!
    ;`. Kill me please.     – Tanveer Badar Mar 20 '22 at 12:10
  • what about hook files that doesnt contain react component? like maybe a react spring custom hooks is it useAnimation.ts or useAnimation.tsx? – kafinsalim Apr 18 '22 at 06:53
54

.tsx extension is used when we want to embed JSX elements inside the files while .ts is used for plain Typescript files and do not support adding JSX Elements.

Sachin
  • 1,206
  • 12
  • 13
25

All of the above answers are correct.

.ts files contains only pure TypeScript

.tsx have included JSX also.

On another point of view, you can copy everything from a .ts file and paste on .tsx file, and you don't need to modify anything. But if you're copying from a .tsx file you need to refactor it by removing the JSX elements.

Manoj Perumarath
  • 9,337
  • 8
  • 56
  • 77
  • Hint: If you use <> to do type-casting in your .ts file and you paste that into a .tsx file, then that will lead to errors. Replace all myVar with myVar as typeA and you're good to go. – Marc Miller Jul 28 '22 at 12:30
8

when you use .tsx you can use JSX in that particular file while .ts gives you error.

Rahul
  • 85
  • 1
  • 2
3

A .ts file is pure typescript while .tsx is an extended syntax format of typescript which combines both typescript and HTML in the same file. For example:

const element = <h1>Hello, world!</h1>;

This is beneficial because we can start to define the output within the code directly and makes it easier to incorporate data, making the HTML similar to templates:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; // Outputs <h1>Hello, Josh Perez</h1>

https://react.dev/learn#writing-markup-with-jsx https://legacy.reactjs.org/docs/introducing-jsx.html

Richard Stokes
  • 385
  • 3
  • 11
1

.ts is used for pure TypeScript files and .tsx is used for files with JSX.

Udara Vidunuwan
  • 11
  • 2
0

.tsx contains jsx and .ts is a pure typescript file. very useful in React TS if you want to create custom hooks and interfaces that will be used in many files.

Abzz1290
  • 1
  • 1