Is there any downside to using .tsx instead of .ts all the times in typescript?

In TypeScript, the .tsx extension is specifically designed for files supporting JSX syntax, which is commonly used in React projects. The main drawbacks of using the .tsx extension instead of .ts are as follows:

1. Performance Issues: When you don't need to use JSX syntax, still using .tsx may cause the compiler to unnecessarily parse JSX, which could slightly increase compilation time.

2. Project Clarity: Mixing .tsx and .ts in the project helps developers quickly identify which files are UI-related React components and which are pure TypeScript code. If all files use .tsx, this distinction becomes less obvious, potentially making the project structure and file purpose less clear.

3. Tooling and Environment Support: While most modern development environments and tools support .tsx, in certain cases, specific tools or older editor versions may support .tsx less maturely than .ts. This could lead to issues with syntax highlighting, code suggestions, and other features.

4. Learning Curve: For new developers joining the project, if all files are .tsx, even though many do not contain JSX, this may increase their learning curve as they need to understand why non-component code also uses the .tsx extension.

In summary, while technically it is possible to use the .tsx extension without JSX, to maintain code clarity, optimal tool support, and compilation performance, it is recommended to use .tsx only for React components that actually contain JSX, and use .ts for pure TypeScript code. This approach helps improve project maintainability and reduce the onboarding difficulty for new members.