Why and How to use TypeScript in your React App?
Long back when I read about Typescript, I did not welcome it with open arms. I really did not want to explore one more new layer in Javascript world. I will not get surprised if you share that you also got the same feeling about TypeScript.
TypeScript is the missing part of Javascript.
I have enjoyed writing in TypeScript for more than a year and now I feel I am going to struggle without it.
If you are working on any project which you want to maintain for a longer time then you should write in TypeScript.
Tip: Use Bit (Github) to isolate React TypeScript components from your project and share them to a collection in bit.dev. It would make your components available for reuse (everywhere), for you and your team. It's a great way to incorporate React TypeScript in an existing React JS project, without having to update the entire project!
Why TypeScript?
There are many benefits of TypeScript. Let's discuss a few of those:
- Code Suggestions
TypeScript populates with the options while you type which saves a lot of dev effort of figuring out what should be written. Writing in TypeScript makes it self explanatory. E.g if a new developer joins the team and he is reusing a component, TypeScript will suggest what are the props required in the following screenshot.
Note line 2, the Props interface tells what are the expected props.
- Highlight the errors as early as possible
Suppose if you are preparing to launch a satellite, would you like to know all the issues while you are building and fix it before the satellite leaves your launchpad or you would launch it and if it breaks then fix and relaunch? Without any thought, obviously, we want to know the issues as soon as possible.
While you are writing, TypeScript tells you what is wrong.
- Self-documenting code
The type, interfaces, enums, types for function parameter and its return type, etc makes the whole code base more predictive.
TypeScript helps in self-documenting the whole code base and the code reading experience is improved. TypeScript helps developers to understand each other’s code easily.
Writing code is like writing short stories. If others understand it without your verbal explanation and enjoy reading your code then you are a good author.
- TypeScript = JavaScript + some amazing stuff
TypeScript is the superset of javascript, which means that in your.tsfile you can write plain old Javascript along with new TypeScript syntaxes. This helps the developers to slowly learn TypeScript features and write code. - Migrating to TypeScript is a great experience
Read this post to know how Slack Engineering has benefitted by using TypeScript.
When to use Typescript?
If you are working on a project which you are going to maintain for long-term, you should use TypeScript from day 1.
Another great use case can be, if you are creating any library, you should write it in TypeScript, this will help the other developers using your library to predict the inputs and will help with the error on the fly.
Configuring TypeScript
TypeScript gives the option to configure the compiler. You can configure how strict you want TypeScript to be, prioritize the types of errors, set the target ECMAScript version, enable source map, etc.
All these configurations are done in tsconfig.json file which is located in the root of a project. If a blank object is passed, TypeScript applies the default configurations.
Visit the official documentation to know about the configuration options available.
Setup Typescript in React app
Let’s try to add Typescript to our React apps for few scenarios.
1. Creating new react app using create-react-app v2.1 or higher
create-react-app 2.1 has now got typescript inbuilt. If you are setting up a new project using CRA use --typescript as the parameter and the new project will get setup using typescript.
npx create-react-app hello-tsx --typescriptThe project is setup using TypeScript and tsconfig.json will be generated.
2. Adding TypeScript to existing create-react-app project
If you want to add TypeScript to the existing app, then install TypeScript and other required types
npm install --save typescript @types/node @types/react @types/react-dom @types/jestRename the files to .ts or .tsx and then start the server. This will generate the tsconfig.json file automatically and you are ready to write React in TypeScript.
Note: When TypeScript is added the plain JavaScipt code also works as perfectly fine, this allows us to slowly migrate to Typescript.
3. Adding TypeScript to React when not using create-react-app
If you are not using create-react-app, the other most common way to setup React is using webpack. Let’s figure out what all you need to tweak in your webpack configuration to get TypeScript.
step 1: Install required packages
npm install --save-dev typescript awesome-typescript-loaderWe need to install these packages:
- typescript: This package is responsible for compiling TypeScript code to Javascript code.
- awesome-typescript-loader: As webpack only understands plain CSS, javascript, and HTML. This is a webpack loader which helps in communicating webpack with typescript to compile TypeScript code to JavaScript code. You can configure the compilation, please have a look in official documentation of this loader.
step 2: Update the webpack configuration
After installing the packages we want to tell webpack the format of TypeScript file i.e the files with extension .ts and .tsx. Along with file format, we also have to tell webpack which loader will handle these file format. E.g to convert .scss files to CSS, the webpack need sass-loader package.
Update your webpack configuration as follows:
step 3: Add TypeScript configuration file
As discussed above we need to add the config file in the root of the project. You can modify this file and get a required flavor of TypeScript as per your needs.
The minimal configuration should look as follows:
Restart your server and you are ready to write in TypeScript.
Next Steps
This was a very basic intro to TypeScript majorly focusing on how to setup TypeScript in various state of React projects which should enable to start with TypeScript.
I will soon write another article with the best practices to write React using TypeScript and how to use maximum features from TypeScript so that we write quality React code. Please follow me to keep yourself updated.
Please share your thoughts about this article in the comment section, I’d be happy to talk! Thanks for reading, learning and sharing 😊
If this article helped you, then you can buy me a coffee 😊
