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?

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.


.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.


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