circuit

React with TypeScript or JavaScript — Which Side are You on?

JavaScript is the beloved child of frontend development, but TypeScript is the father of this beloved child. Learn to embrace it and get ahead in 2022.




TypeScript continues to be one of the most loved languages as seen in the 2021 Stack Overflow developer survey. At the top 3 spots of the most loved language for 2021, it's definitely something worth exploring.

In this article, we will explore what TypeScript is about and what is the difference between using TypeScript over JavaScript in React.

React Code and File type in TypeScript vs JavaScript

From one glance, it looks like the code from a typical React TypeScript and JavaScript has no difference at all.

This is not at all surprising as TypeScript is the father of JavaScript — It is the Superset of JavaScript. What this means, is that whatever code that runs on JavaScript will also be able to run the TypeScript files.

What the diagram above shows is that all JavaScript are valid TypeScript code, but not all TypeScript are valid JavaScript code. This concept is similar to how all CSS are valid on SASS code, but not all SASS code are valid CSS code.

However, the browser does not know how to run TypeScript code, which is why you would see tsconfig.json in all of your TypeScript projects. This config file will customise the behaviour of the TypeScript compiler and compile TypeScript code into JavaScript so that the browser can understand and execute the code.

At the end of the day, the only difference between TypeScript and JavaScript React project is that its file extension ends with .tsx and the other ends with .js.

How to create React project in Typescript

You can create a new TypeScript React project by using create-react-app library in your environment and use this command:

npx create-react-app my-app --template typescript

or,

yarn create react-app my-app --template typescript

If you have an existing JavaScript React project that you want to transform it into TypeScript, you can run this command.

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

or,

yarn add typescript @types/node @types/react @types/react-dom @types/jest

After running the command, you can rename all your .js files to .tsx and restart the server and get going.

Bug Catcher

The power of TypeScript comes in when you put strict: true in your tsconfig.json file. It will automatically strong typed all your variables, props and etc. Imagine you have a user object with a name and email address.

And you are passing this information down to your child component to render this information.

Missing type check, missed out typo on JavaScriptMissing type check, missed out typo on JavaScript

Strict type check on TypescriptStrict type check on Typescript

IntelliSense helper in IDE

Same situation as the example above, when you pass down a user object from parent to child component.

Missing IntelliSense on JavaScriptMissing IntelliSense on JavaScript

IntelliSense on TypescriptIntelliSense on Typescript

Type System

So I guess you might have questions about how do you strict type your object or variables such that the code can activate Bug Catcher and IntelliSense in your React TypeScript project. 3 things to take note of to get the TypeScript Type System working for you in your React TypeScript project.

1. Declare type for primitive types variable and declare the interface for objects/array.

Type declaration for primitive typesType declaration for primitive types

Define interface for object to strict type the dataDefine interface for object to strict type the data

If you want to have an optional field in the object, you can put ? to make that field optional so that TypeScript won't bug you when checking through your code.

TypeScript showing error for missing required field as declared in your interfaceTypeScript showing error for missing required field as declared in your interface

Change name field to optional, no more complaint from TypeScriptChange name field to optional, no more complaint from TypeScript

2. Declare functional component type whenever necessary

Child component unable to identify user being passed down from parentChild component unable to identify user being passed down from parent

Add type declaration in your React.FC to let your component know what to expectAdd type declaration in your React.FC to let your component know what to expect

3. This is free for you. If you initialise a variable with a value, TypeScript will automatically infer the type for you.

Initialise your variable and TypeScript will strict type it for you for freeInitialise your variable and TypeScript will strict type it for you for free

Summary

Hope that this article moved your heart and open your eyes to see the beauty of using TypeScript for your React project. It's a short-term pain, long-term gain relationship. Initially, when you first start the TypeScript project, you will find it very hard and troublesome to set up all the boilerplates, but after your app becomes bigger, you will find that those boilerplates come into great help and make development much faster and less error-prone. Don't take my word for it. Give it a try and let me know in the comments below which camp (TypeScript or JavaScript) you belong to and why you chose it, I would love to hear from you. Cheers.




Continue Learning