React Typescript: Here’s Everything to Know

What is React Typescript?

Do you want to supercharge the stability of your React applications? Then Typescript is the answer that you were looking for! Typescript is an excellent tool to make your react application much more clear and neat. The Typescript package has been introducing new packages for more support in React steadily.  We can see the features getting ramped up especially from the version 3.0 to 3.1. The integration of Typescript with React once was a lot of headache for the developers. But presently, it is a very straightforward process which we will discuss in our current article.

In one of our previous articles, we have talked about the Create React App in great detail. Currently the Create React App also has the support of the Typescript built into its package. Typescript simply induce in a new project with the flag of template transcript. Here, we will specifically use CRA for bootstrapping an application that is React based with Typescript. But before we explore let’s see the setup of it first.

We can find various noticeable changes if we see the JavaScript based CRA boilerplate:

• A tsconfig.json file is now included for the purpose of configuring the Typescript compiler options.
• In the newer versions, .js files are now considered as .tsx files. Along with that the Typescript compiler itself will pick up all the files that are .tsx. 
• Dependencies for the @types packages are contained in package.json. It also supports node, jest, react dom or even react out of the box.
• We can also find a react-app-env.d.ts file for referencing the react-scripts types. What happens is that this file gets generated automatically when we start the development server with the yarn start.

When we run the yarn start, at that stage we will compile and run our application. 

Installing the Tslint-React?

Something that is very much helpful with Typescript and React is that installing the required linting tools. Here, we will refer to the tooltips so as to obtain a certain type which is especially true with the events. 

Yarn global add typescript tslint-react

Here as an example, you can use the sample that we are showing:

This command will generate a tslint.json file. This has some default options but it is possible to replace them with custom files too. The choice is completely up to you. Here as an example, you can use the sample that we are showing:

We can summarise what is actually happening in this file as follows:

• defaultSeverity is a level in which the errors will be treated. Error is termed as the default value here.
• The rules that we are extending from are based on React only. We have removed the rules that do not adhere to the syntax of React.
• What we can also do is omit the rules in the rules block.
• Considering another example, the ordered-imports prompts us in ordering the import statements in an alphabetical manner.
• With the LinterOptions, we can exclude all the Javascript files in the files that are in the config directory and the files that are present in the Typescript files in the node_modules from TSLint checking. 

Now that we have discussed this far, we can move on to the final step for the setting up of the development environment.

Sublime Text 3 Packages: 

The final step is to install the SublimeLinter which should be followed by SublimeLinter-eslint packages via the package control. When we restart the Sublime Text, the tools are already available. You should keep in mind that it is very much possible that you will receive an error. And that will read that the tslint module was unable to locate when we restart the Sublime Text. If you have to face this problem, the best way would be to re-install the packages locally rather than doing it globally which we have previously opted for, Following the documentation should be able to solve all such problems.

yarn add tslint tslint-react

Extension for Vs Code: 

For the editor of Visual Studio Code, we have to install the TSLint extension for the full Typescript support. With our IDE that is now ready for handling the Typescript development, it’s time for us to dive into some of the code and learn how to add the interfaces and the types to the props and state that are present within React.

Typescript with Redux: 

We have previously talked in great detail about how Redux works with React and here we are going to talk about the working of Typescript with redux. The steps involved in this process are:

Typing the Store: 

The first step is to define an interface for the Redux store of our choice. If we define the expected state structure then it will be very beneficial for our team and it will also aid in the maintenance of the expected state of the application.

Defining Action Types and Actions: 

The action types are based on the usage of a pattern of const & type. These objects are later imported where we can easily define our action interfaces and the actions themselves. And we are able to type them along the way.

Defining Reducers: 

For us to simplify the process of specifying any action that is within the reducer, what we can do is take advantage of the union types that were introduced in the Typescript 4.1. What a union type does is simply gives us the ability of combining two or more types into one type.

Creating Initial Store: 

Now we can initiate the store within our index.tsx and utilise the angle brackets again for the passing of the type in conjunction with the createStore(). 

Application of Interfaces to Components:

If you are wondering where we can apply the interfaces then you would like to know that we can do it to both class components and the stateless function components. For the class components, we are going to utilise the angle bracket syntax for applying our props and the state interfaces respectively. If you want to define state but don’t have any props then there’s one way to do so. We can use either{} or object in the place of FormProps. Both of the values are valid and empty objects. And when it comes to stateless function components , what we can do is pass the props interface which can be followed by any other arguments and the specific interfaces that they have.

Conclusion: 

In this article, we have introduced Typescript in conjunction with React and how we can utilise the tslint-react for a much smoother development. We have gone through how we can interface and type our props and state throughout the components that we have and also how we can handle Typescript with addition of events. Last but not the least, we know that it is possible to integrate Typescript with Redux. Also it is possible to integrate the types with the use of a Redux setup. What Typescript does is introduce additional considerations into the React projects that we are building and the additional investment that we are making for supporting the language will finally improve the ability to manage our applications as they are being scaled.