Setting Up TypeScript in React Application

TypeScript has been growing and growing in popularity over the past years and is widely adopted in company tech stacks. From my research I have found that it is important that any junior devs looking to land their first job, should have some exposure to TypeScript. In this post I will be showing how to set up your react application with TypeScript, and showing some basic advantages of using typescript in your projects with examples.

If you have not initialized your new react-app yet here is the docs on how to get started.

Once you have that set up you are going to want to run

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

By installing these packages you should have everything you need to get started in terms of dependancies.

Now you need to change a few files from .js to .tsx in your src directory

App.js --> App.tsx
index.js --> index.tsx

Now if you run ‘npm start’ your app should load in the browser and ts.config file will be generated for you. Your environment is now set up!

The main advantage of using TypeScript is type checking; establishing variables and such with strict type validations will make for a much nicer error handling process than JavaScript’s anything goes approach. You can make sure that if you expect a string from a variable you will get a string, if not, TypeScript will throw an error and let you know why.

Let’s take a look at some examples.

Here we are creating a variable firstName but declaring it with :string to let TypeScript know that this variable should be a string. We are rendering this variable using ‘typeof’ keyword before our variable and this will return the data type of firstName.

Here are some examples of other basic types:

If you don’t want to specify a type you can use the ‘any’ keyword. Use this sparingly and should really be mainly used for prototyping.

let thisVariable: any = 'this can be anything" 

Now that we know how to create variables let’s take a look at type inspection when passing props.

Here we are passing a message prop to our message component, nothing new here.

This is the message component. When taking in our prop, we establish that our message should be a string. Now you have type inspection with your props! How do we do this when we are passing multiple props to our message? This is where interfaces come into play. Interfaces are simply a way to structure and type check our data coming into our component. They are only used by the compiler and have no impact on the program. Let’s take a look.

We are now passing a sender prop to our message component.

We now create our interface and structure our data with type validations, and simply pass that interface as our props. We now have type validations for both sender and message within our message component.

We now know how to set up our typescript environment, declare variables with data type validations, pass props with type validations, and use interfaces to structure our data with type inspection and render that data!

I hope you found this beginner introduction useful and can build on top of it!