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!
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!