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.
