Script Setup Usecontext

Posted on  by admin

Full visibility into production React apps

Editor’s note: This post was updated 15 February 2022 to add a theming example, improve and update the references to the React Context API, and remove outdated information. TypeScript has become increasingly popular after numerous improvements and additions were made to the code, such as robust static type checking, understandability, and type inferences.

When TypeScript is used with React, it offers improved developer experience and more predictability to the project.

In this guide, we will learn how to use TypeScript with React Context by building a to-do app from scratch. To get the most out of this tutorial, you need a basic understanding of React and TypeScript. In this post, we’ll cover:. The React Context API was introduced in React v16 as a way to share data in a component tree without needing to pass props down at every level. The Context API is ideal for data that is considered “global” but not large or complex enough for a dedicated state manager like Redux or MobX, such as the user’s current language, current theme, or even data from a multi-step form before being sent to an API.

To demonstrate React Context, we’ll build a to-do app that uses the Context API for managing tasks on the list, and also for theming.

We will use Create React App in order to have a modern configuration with no hassle, but you are welcome to set up a new app from scratch using Webpack.

Begin by opening your terminal and running the following command:. To easily create a TypeScript project with CRA, you need to add the flag --template typescript, otherwise the app will only support JavaScript.

Create a provider component

Next, let’s structure the project as follows:. Here, there are two files to underline:. The context/todoContext.tsx file, which exports the created context for the to-do functionality, and its provider. The todo.d.ts in @types file contains the type definitions for parts of the app that concern the to-do list implementation.

Having dedicated type definition files is a best practice because it improves the structure of your project. The declared types can either be used by reference without importing them, or explicitly by importing them into another file (though they have to be exported first).

Writing a lot of TypeScript? Watch the recording of our recent TypeScript meetup to learn about writing more readable code.


Ideally, we’d want to import the types so we don’t pollute the global namespace.

With this in place, we can now get our hands dirty and code something meaningful.

Create the context

  • TypeScript types allow you to define what a variable or function should expect as a value in order to help the compiler catch errors before runtime.

  • As you can see, the interface ITodo defines the shape of a to-do object.

  • Next, we have the type TodoContextType that expects an array of to-dos and the methods to add or update a to-do.

  • React Context allows you to share and manage state across your components without passing down props.

The context will provide the data to just the components that need to consume it.

Here, we start by creating a new context and set its type to match TodoContextType or null.

We set the default value to null temporarily when creating the context; the intended values will be assigned on the provider.

Create a provider

Next, we create the component TodoProvider that provides the context to the component consumers.

# 什么是 script-setup

Here, I initialize the state with some data to have todos to work. The function saveTodo will create a new to-do based on the interface ITodo and then append the object to the array of to-dos.

What is the React Context API?

The next function, updateTodo, will look for the id of the to-do passed as a parameter in the array of to-dos and then update it.

# 什么是 defineProps 和 defineEmit

Next, we pass the values to the context to make them consumable for the components. With this, we are now able to consume the context.

So, let’s create the components in the next section.

Below, we have a form component that allows us to handle data entered by the user using the useState Hook.