ReactJS + Typescript

React is a popular JavaScript library for building user interfaces, and TypeScript is a popular typed superset of JavaScript that can improve the development experience by catching errors before you run your code. In this article, we’ll explore how to use TypeScript with React to create a powerful, type-safe development workflow.

To get started, you’ll need to have Node.js and npm (the Node.js package manager) installed on your machine. You can check if you have these tools installed by running the following commands in your terminal:

node -v
npm -v

If you don’t have Node.js and npm installed, you can download and install them from the official website (https://nodejs.org/).

Once you have Node.js and npm installed, you can create a new React project by running the following command:

npx create-react-app my-app --template typescript

This will create a new directory called “my-app” with a basic React project set up and configured to use TypeScript.

Next, navigate to the project directory and start the development server by running the following commands:

cd my-app
npm start

This will open a new browser window with the React application running. You should see a page with the text “Welcome to React” displayed.

Now that we have a basic React project set up and running with TypeScript, let’s take a look at how to use types in our code.

In TypeScript, we can specify the type of variable using the “: type” syntax. For example, we can declare a variable called “name” with the type “string” like this:

const name: string = "Guilherme";

We can also specify the type of function parameter and the return type of function. For example, here’s a function that takes a number as an argument and returns a string:

function sayHello(age: number): string {
    return `Hello, I am ${age} years old`;
}

Now that we’ve seen a few examples of how to use types in TypeScript, let’s see how we can apply this to our React code.

One common place where we might use types in a React project is in the props (properties) that we pass to a component. For example, let’s say we have a component called “Person” that takes a name and an age as props. We can define the types for these props like this:

type PersonProps = {
    name: string;
    age: number;
};

Then, we can use this type when defining our component:

const Person: React.FC<PersonProps> = (props) => {
    return (
        <div><p>Name:{props.name}</p>
            <p> Age:{props.age}</p>
        </div>
    );
};

Notice that we used the “React.FC” generic type to define our component, and we passed the “PersonProps” type as the type argument. This tells TypeScript that the component expects props with the shape defined in the “PersonProps” type.

Now, if we try to pass a prop that doesn’t match the defined type, we’ll get an error from the TypeScript compiler To see this in action, let’s use the “Person” component in our app. Open the “src/App.tsx” file and update it to look like this:

import React from 'react';
import Person from './Person';

const App: React.FC = () => {
    return (
        <div className="App">
            <Person name="Guilherme" age={38}/>
        </div>
    );
};

export default App;

Here, we imported the “Person” component and used it in the “App” component. Notice that we passed the correct types for the “name” and “age” props.

Now, let’s say we made a mistake and passed a number for the “name” prop instead of a string. If we did this, the TypeScript compiler would give us an error, telling us that we passed the wrong type for the “name” prop.

Using types in this way can help catch mistakes and improve the overall quality of our code. It can also make it easier for other developers to understand and work with our code, since they can see the expected types for props and other variables.

That’s just a basic example of how to use TypeScript with React, but there’s much more you can do with these tools. You can learn more about the advanced features of TypeScript and how to use them with React by reading the official documentation (https://www.typescriptlang.org/docs/handbook/react.html).

I hope this tutorial helps you get started with using TypeScript in your React projects! Happy coding!