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?

Solution 1:

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.

Solution 2:

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

Solution 3:

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.