TypeScript and React: Using TypeScript with the popular React library

Are you a web developer who wants to use the powerful typing capabilities of TypeScript with the popular React library? Are you tired of manually debugging your JavaScript code and wish for a more streamlined development experience? Well, TypeScript and React might be just the perfect combination for you!

In this article, we will explore what TypeScript is and why it works so well with React. We will learn how to set up a TypeScript project using React and how to take advantage of TypeScript's features to write better, safer, and more maintainable code.

What is TypeScript?

TypeScript is a statically-typed superset of JavaScript that was developed by Microsoft. It adds optional static typing to JavaScript, which provides enhanced code accuracy and helps identify errors before code execution. TypeScript compiles to plain JavaScript and can be used with any browser, host, or operating system.

TypeScript gives developers more control over their code and provides a type system that helps catch errors early on. By explicitly specifying the types of variables, functions, and interfaces, TypeScript makes it easier for developers to manage their code at scale.

Why use TypeScript with React?

React is a dynamic JavaScript library that simplifies building user interfaces. It allows developers to create reusable UI components that can be rendered on the client side. However, as React applications grow in complexity, it can become difficult to manage state, props, and events.

TypeScript can help solve these problems by providing the following benefits:

• Type checking: TypeScript provides a type system that can catch errors that are not detected by JavaScript. This helps developers catch errors early on and avoid runtime errors that can be difficult to debug.

• Code readability: By providing explicit typings, TypeScript improves code readability and makes it easier for developers to understand their codebase.

• Improved tooling: The TypeScript compiler helps developers identify errors in real-time through the use of powerful IDEs such as Microsoft's Visual Studio Code.

• Better documentation: TypeScript provides self-documenting code, making it easier for developers to understand how to use API methods, variables, and interfaces.

Setting up a TypeScript project with React

Before we dive into how to use TypeScript with React, we need to set up a project. To get started, follow these steps:

1. Set up a new React project

There are several ways to set up a new React project, but one of the easiest is to use the create-react-app CLI tool.

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

This will create a new React project with TypeScript. Note that we have used the --template flag to specify that we want to use TypeScript instead of JavaScript.

2. Install TypeScript

The next step is to install TypeScript in our React project.

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

This command installs TypeScript and the necessary type definitions for Node.js, React, React DOM, and Jest.

3. Configure TypeScript

After installing TypeScript, we need to create a tsconfig.json file in the root directory of our project. This file specifies how TypeScript should transpile our code.

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ESNext",
        "jsx": "react",
        "strict": false,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "lib": ["ES2015", "DOM"]
    },
    "exclude": ["node_modules", "build", "dist"]
}

In this configuration file, we specify that we want to compile our code to ES6, use the ESNext module system, and target React's specific JSX syntax. We also tell the compiler to enforce strict typing and to provide better interop with CommonJS modules.

4. Write some TypeScript code

Now that our project is set up, we can start writing some TypeScript code. Let's create a simple React component and see how we can take advantage of TypeScript's type system.

import React from 'react';

interface Props {
    name: string;
}

const HelloWorld = ({ name }: Props) => {
    return (
        <h1>Hello, {name}!</h1>
    );
};

export default HelloWorld;

In this example, we have defined a React component called HelloWorld that expects a single prop called name. We have used an interface in TypeScript to define the shape of our Props object and to ensure that the prop name is of type string.

Using TypeScript with React hooks

React hooks are a powerful feature that were introduced in React 16.8. They allow developers to use state and other React features without having to write a class component. Hooks are written using JavaScript functions and are easier to read and understand.

Let's take a look at how we can use TypeScript with React hooks:

import React, { useState } from 'react';

interface Props {
    initialCount: number;
}

const Counter = ({ initialCount }: Props) => {
    const [count, setCount] = useState(initialCount);

    const handleIncrement = () => {
        setCount(count + 1);
    }

    const handleDecrement = () => {
        setCount(count - 1);
    }

    return (
        <>
            <h1>Count: {count}</h1>
            <button onClick={handleDecrement}>-</button>
            <button onClick={handleIncrement}>+</button>
        </>
    );
}

export default Counter;

In this example, we have created a React component called Counter that uses the useState hook to manage state. We have provided an initialCount prop to initialize the count value. We have also defined two functions handleIncrement and handleDecrement that use the setCount function to update the count value.

Note that we have used an interface to define the shape of our Props object and to ensure that the initialCount prop is of type number. We have also used the <> syntax to return multiple React elements from our component.

Conclusion

In this article, we have learned how to set up a TypeScript project with React and how to take advantage of TypeScript's type system to write safer, more maintainable code. We have seen how TypeScript can help catch errors early on and provide better tooling and documentation for our code.

TypeScript and React are an excellent combination, and we encourage you to give it a try. As always, if you have any questions or comments, feel free to leave them below. Happy coding!

Additional Resources