Getting Started with TypeScript and React

Riding on the train from the last blog post, it’s time for another one.

This week, let’s talk about using TypeScript with React and here’s what we’ll do today:

  • Why React and TypeScript?
  • Getting started with React app with TypeScript
  • An example of React-TypeScript component 

Why React and TypeScript?

I think we all by now how great React is and the popularity it’s fan base is.

Let’s take a step back and talk about what TypeScript is and you’ll see why you should use it in your React application.

TypeScript was originally made and maintained by Microsoft. To keep it short, TypeScript is the strongly-typed version of JavaScript that allows for an optional static type-checking with the latest ECMAScript features. All the code you write in TypeScript is then translated to JavaScript.

Using TypeScript in your application will gain you the benefits of IntelliSense (Completing your typing for you, keep track of your parameters etc.). What all of this means is that you get the benefits of ensuring code quality and catching potential errors earlier.

Next, we’ll jump right into it by creating a React application and integrate TypeScript in it.

Getting Started

//Make a new directory and travel to that folder
mkdir react-typescript
cd react-typescript

//Initialize a new React application with TypeScript
npx create-react-app react-typescript-demo --typescript 

Voila! Now you’ve got a React app with TypeScript integrated in it.

An example of React-TypeScript component

Let’s take a look what an example React-TypeScript component could look like. For this example, I’m going to create a user profile component.

//Create a model called IProfile for your user in a file called profile.ts
export interface IProfile {
  username: string;
  bio: string;
  age: number;
  photos: IPhoto[];
}

export interface IPhoto{
  id: string;
  url: string;
}

In TypeScript, an interface defines the syntax of an entity and the entity must conform to this syntax. The members of the interface can be properties, methods or events. To keep it simple, an interface is an object and the contents of that object must follow the rules previous defined by it.

In the above code block, we have 2 interfaces it’s underlying features. In the IProfile interface, we have 4 properties: username, bio, age, and photos. The username and bio properties are strings, the age property is a number (floating point numbers), and the photos is an array of IPhoto – which is another interface that has the id and url string properties.

To read more about interfaces in TypeScript, check out this blog post from LogRocket.

//In your UserProfile.tsx component
interface IProps {
  profile: IProfile;
}

//Feel free to add your own styling
const UserProfile: React.FC<IProps> = ({ profile }) => {
  return(
  <div>
    <h1>Welcome to {profile.username}'s page!</h1>
    <h3>A little about myself: </h3>
    <p>Age: {profile.age}</p>
    <p>Bio: {profile.bio}</p>

    <h3>Check out my photos!</h3>
    {profile.photos.map((photo) => (
      <img id={photo.id} src={photo.url}/>
    ))}
  </div>
  )
}

In this example React component, we create yet another interface IProps. This IProps interface is used in a React component with the React.FC or React.FunctionComponentwhich explicitly details the type of the parameter passed into the component. 

Once all that is done, you can now use the properties used in the IProfile interface in your React component.

Learning more about React + TypeScript

I hope this short guide helps you get started in using TypeScript in your React application. If you’re looking to learn more, here are some resources to look into:

TypeScript is not for everyone

Depending on your preferences, TypeScript is just not for everyone. It’s understandable why though – it takes more time to configure a component and write code for it. For some, it may be a nuisance and others just don’t want to deal with it. 

On the flip side, you get advantages such as typechecking and autocomplete like the properties in an interface, as seen above. Since TypeScript uses types and linters, we ensure code quality and catch problems early before compilation. TypeScript will tell you what’s wrong with your program even before you run it which reduces the time you spend chasing bugs and errors down.

The End

My advice is to take into consideration what your coding style is and choose what you prefer. My hope is that this short introductory post will show how it may not be that difficult after all.

Thanks for taking the time to read my blog post! I would love to hear what you thought of it, so feel free to leave a comment. Any feedback is appreciated and welcomed.