Using Typescript in a React App

0
26

In this article, you are going to learn how to quickly get started by building React applications that use TypeScript. For this demonstration, you are going to use create-react-app the official boilerplate for generating a new Reactjs project. TypeScript is a superset of JavaScript that provides additional layer as strongly typed programming language. It follows object-oriented programming concepts when compiled.

Pre-requisites

you must have installed:

  • Nodejs

  • npm/yarn

  • create-react-app version 2

Getting Started

If you do not have create-react-app installed, please run the command below in your terminal.

If you have already installed it, please ignore the above step and let us begin. Invoke the create-react-app command with additional TypeScript option to generate a React application with TypeScript enabled. Now that Create React App v2 is out, official TypeScript support comes with it. To check which version you are currently on run the following command.

create-react-app by default uses yarn as the package manager to install required dependencies. This is an exciting thing for JavaScript users that use TypeScript We are going to use yarn too to avoid context switching. If you have used create-react-app before, this should look very familiar. The additional piece of information is adding the –typescript flag. This flag tells CRA to use TypeScript as the default syntax and add the appropriate configuration to make it work out of the box.

You will get the first hands-on experience with TypeScript in your React project by looking at the project structure. Open the newly generated folder in your favorite code editor. You will see the following.

react app

Notice how the file extensions of App component is automatically changed to .tsx from the usual .js or .jsx. There is also .tsconfig file with rules and configuration. It sits at the root of a TypeScript project and indicates the compiler settings and files to include.

You can now run the application by running the command yarn start. You will be welcomed by the following welcome screen.

react app

The main advantage TypeScript provides is that it is a statically typed. Programming languages can either be statically or dynamically typed. The difference is when type checking occurs.

The App.tsx File

Let’s jump into the main App file that usually is our main React component. You would not find any TypeScript enabled source code here.

It is the same as the good old App.jsx file.

Create a TypeScript Component

In this section, let us create our first TypeScript Component. Inside App.tsx add the following above the class App.

This is a bare minimum class component which takes greetMessage from props. Simple React and JavaScript stuff. At this point, you will be getting a compilation error both in your code editor and in terminal.

react app

react app

Now let us modify this function and TypeScript and make this error go away.

We are defining in above that the prop greetMessage should be a string. This is called an inline way of defining a type. There are different ways to use TypeScript and described types. One can be if you create an interface as a separate object.

And then use them in the function Greetings like below.

This step includes a lot of boilerplate code writing. We are going to stick with the first option we used, that is inline types.

Using the TypeScript Component

So far our App.tsx file looks like below.

Let us the newly created TypeScript stateless component in the App. After the <a> tag, add:

Now visit the URL http://localhost:3000/ to see it in action.

This shows our props are well working. On passing the wrong type of prop, say if you try to pass a number, React would not even compile. That is the advantage TypeScript gives you. To catch errors like these in development mode. Change the value of greetMessage in Greetings from Hello World to {234}.

First of all, you will be notified by the code editor that it expects a string instead of a number.

Next, visiting the URL http://localhost:3000/ in the browser window, where the app is compiling, it will display a similar error message.

Conclusion

And that is all you need to get started with React and TypeScript. Your application should now have the new features and be fully running with TypeScript. This only scratches the surface of what TypeScript provides us. You can create types for all your components and props and catch the errors faster, even before the React app compiles.

LEAVE A REPLY

Please enter your comment!
Please enter your name here