When it comes to refactoring, some adjustments are usually necessary.
I recently tackled this task for a MERN stack project, which involved working with React + NodeJS.
Here is an overview of what I did:
- Install necessary dependencies (such as
typescript) -- typically straightforward
- Add scripts, eslint configurations, tsconfig settings, etc. as required -- usually no major issues here
- Rename your files from
.js to .ts / .tsx -- expect errors based on the strictness of your tsconfig
- Address and resolve any resulting errors or warnings
During this process, I made sure to set "strict": true, in my tsconfig file. While this led to lots of errors, it also guided me on what needed fixing. The choice to implement this level of strictness is ultimately yours.
In response to your specific inquiry:
You mentioned wanting to only include new files with the .tsx extension. However, importing a .tsx file into a .js file will not trigger type checking for the .tsx file at all. Hence, you must update the existing .js files to have a .tsx extension as well.
While you can make these adjustments, keep in mind that JavaScript files won't undergo type checking (as they are still JS). Nevertheless, errors within the .tsx files should still be detected by the tsconfig setup.
On the whole, I advise against mixing JS and TS in a project, as it can complicate maintenance. It's better to refactor now rather than waiting for the project to become larger and more intricate.
I hope this information proves helpful. Best of luck!