3 Steps Upgrade JavaScript(react) Project Into TypeScript(react) project

2021 still JavaScript? Let’s consider upgrade to TypeScript within 3 steps

Photo by Ferenc Almasi on Unsplash

Typescript vs JavaScript:

Let’s look at the pros and cons of TypeScript compared with JavaScript

Pros:

• add type check
• Suitable for large projects

Cons:

• compile speed is slow
• Not all browsers support TypeScript(need to rely on loader)

Let’s take deno project as an example. Deno used to use a large percentage of TypeScript but then they keep decreasing the percentage of TypeScript to improve the speed.

Deno Language Percentage Before

deno Language Percentage now

Nowadays Deno only has 15% TypeScript.

If you are not building a framework or infrastructure code you do not need to worry too much about the compile speed. From my experience update JavaScript to TypeScript worth the effort as it can somehow improve the quality of code and productivity.

Upgrade Process:

Step 1: install some additional packages:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Step 2: rename all .js file into .tsx

tsx file

Step 3: modify tsconfig file(optional)

example of tsconfig file

config file will be autogenerated after you install the libraries that I have mentioned before. For more information you can visit this page:

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Conclusion

In most cases, TypeScript is a better choice compared with JavaScript. If you are going to start a new project I highly recommend you to consider TypeScript.

Don’t forget to like, if you find this article useful.