What's the difference between .t

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

Solution 4:

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