Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?

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!

like image 314
Hafsa Mushtaq Avatar asked Jul 03 '19 13:07

Hafsa Mushtaq


People also ask

What is .TSX file in React?

ts file for TypeScript, there is also a new file extension . tsx . This is the extension that you should use anytime you include the JSX syntax in a React component file. You also need the jsx set to true which is done by default. TypeScript is able to compile JSX directly into JavaScript.

What is the difference between React JS and React ts?

The difference between doing React JS and React TS is the language you write. You write JavaScript or TypeScript, but at the end of the day the bundle is always JavaScript (Note: Deno is different, it natively runs TypeScript, check it out).

What is the difference between JSX and TSX?

. tsx is similar to jsx except it's TypeScript with the JSX language extension.

What is difference between JSX and TypeScript?

TypeScript is a language that is a syntactic-superset of JavaScript. JSX is FaceBook's XML-like syntax extension to JavaScript, not a language per se.


1 Answers

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.

like image 119
liamgbs Avatar answered Oct 13 '22 15:10

liamgbs