Basic TypeScript

Home / Topic / Basic TypeScript / TypeScript in React

TypeScript in React

TypeScript has become a powerful tool for developing React applications. Using TypeScript with React not only enhances the development experience by adding static typing and autocompletion but also helps prevent errors before they occur. In this chapter, we will learn how to set up a React project with TypeScript and how to correctly type components, props, and more.

This image shows a logo of TypeScript plus React This image shows a logo of TypeScript plus React

Setting Up a React Project with TypeScript

To start, we can create a new React project with TypeScript support using create-react-app. The following command generates a React project template configured for TypeScript:

bash

"This command creates a new React project with TypeScript support using create-react-app."

This command generates a project in the my-app folder with the necessary configuration files to work with TypeScript in React.

Project Structure

Once the project is generated, you will see a folder structure that includes a tsconfig.json file and several .tsx files. The .tsx files are similar to .jsx files in JavaScript but allow the use of TypeScript with JSX.

Typing Functional Components

In React, functional components are the preferred way to create components. TypeScript allows typing the props these components receive, ensuring that the data passed to the components is correct.

Example of Typed Functional Component

typescript

"In this example, we have defined a functional component called Button. We use an interface called ButtonProps to define that the component receives two props: a label of type string and an onClick function."

Using the Component

typescript

"Here we use the Button component and pass the required props, ensuring they comply with the type defined in the ButtonProps interface."

Typing Optional Props

TypeScript also allows defining optional props in components. This is useful when some props are not necessary in all situations.

Example of Optional Props

typescript

"In this example, we have defined a TextInput component where the placeholder prop is optional, meaning that the component may or may not receive this prop."

Typing States with `useState`

The useState hook is widely used in React to handle component state. In TypeScript, we can type both the state and the function that updates it.

Example of Typed `useState`

typescript

"Here we use useState to handle a count state, which is of type number. The initial value of the state is 0, and we use the setCount function to update the state when the button is clicked."

Typing Refs with `useRef`

The useRef hook allows direct access to DOM elements in functional components. We can also type useRef in TypeScript to ensure we always reference the correct type of element.

Example of Typed `useRef`

typescript

"In this example, we use useRef to reference an input element in the DOM. We type the ref as HTMLInputElement to ensure we are always working with an input."

Typing Components with Children

In React, many components accept child elements (children) as part of their props. TypeScript allows typing these children using the property React.ReactNode.

Example of Component with Children

typescript

"This Container component accepts any type of React element as children, which are rendered inside a div with the container class."

Using Context API with TypeScript

React Context API is used to share data between components without the need to manually pass props. We can type the context to ensure that the data we share is always of the expected type.

Example of Typed Context API

typescript

"Here we define a ThemeContext using React's Context API. The context value contains a theme state of type string and a toggleTheme function."

Conclusion

In this chapter, we have learned to use TypeScript with React, including how to type functional components, props, states, and contexts. TypeScript provides us with additional safety when working with React applications, helping to avoid errors and improve productivity.

Back to previous chapter

Mark as read and continue

Ask me anything