Converting a React project to TypeScript - Avoid pain by using correct file extension

Orji Chidi Matthew — Fri, 17 Dec 2021 14:52:31 +0000

I recently decided to make the switch from writing pure JavaScript to writing TypeScript going forward. Like with all things that one can learn, watching all the tutorials in the world won't make much difference unless you actively apply your learning. That much is true for me, at least.

To that end, I decided to convert one of my React projects to TypeScript. To accomplish that I did some research and eventually settled on using ts-migrate, from the good folks at Airbnb. According the project homepage

ts-migrate is intended to accelerate the TypeScript migration process.

The migration process itself is not difficult if you just follow the instructions on the project homepage. However, having followed the instructions, I still experienced a lot of avoidable pain which were directly traceable to file extensions.

Before running ts-migrate against your React codebase, you want to get your file extensions right. Small point, but big pain if not done. Normally, when I write React, I take the liberty of naming all files with a .js extension. This is all okay since the vs-code linter is smart enough to know which files should supposedly have a .jsx extension. The real pain comes when all your component/container files end with .js and you run ts-migrate against them. In my case, some of the files were converted to .tsx but the majority were converted to .ts extension. Consequently, there was a lot of avoidable errors that prevented the project from compiling. This cost me time going through dozens of files to remove those errors. Eventually, I also had to rename the affected files. Luckily, I found this Batch Rename utility in the vs-code marketplace.

So lesson learned going forward - sure I still have some projects I may convert - is to rename all my react component files with a .jsx extension before attempting a migration.

DEV Community: Orji Chidi Matthew

Converting a React project to TypeScript - Avoid pain by using correct file extension