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.
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.
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.
TypeScript with React blog: using interface to suggest the properties
Note line 2, the Props interface tells what are the expected props.
- 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.
TypeScript with React blog: shows error popup and explains what is the mismatch
- 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.
TypeScript is the missing part of Javascript.
- 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.
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 --typescript
The 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/jest
Rename 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-loader
We 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:
module.exports = {
entry: [
path.join(process.cwd(), 'app/app.tsx'), // or whatever the path of your root file is
]
module: {
rules:[{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }], // other loader configuration goes in the array
resolve: {extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx']}
}
}
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:
{
"compilerOptions": {
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": ["./app/**/*"]
}
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 😊
Cheers
#typescript #reactjs #javascript
