Context configuration with typescript

It is easy to work with React Context in TypeScript, but you must be trained in React programming in advance, that's why if you don't have any knowledge in this field, it is better to participate in the React rtl theme academy course and see the necessary training before doing anything. 

What is React?

React is a free and open source JavaScript front-end library for building component-based user interfaces. It is maintained by Meta and a community of developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks such as Next.js.

How long have you been following React continuously? I had never looked for a typescript until now, until I hit the sea and went to find it. In disbelief, I saw how hard it is and how much it cleans the code.

I decided to write an article and give an explanation about the context configuration with Typescript and create a simple todolist with the ability to add todo.

Well, first of all, we need to add ts to the project with the command

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

Well, let's go to the definition of type and interfaces. You can put everything in a file called types.ts or define an interface in any component.

Now I separated them in a file called types.ts:

Well, we create a file called Context.tsx and put our context in it:

As you can see, type context is an array of ITodo interface. Therefore, with this, the type of provider and consumer will be the same.

So what is initialState now? Mirror :

Before going to the reducer, we set a series of interfaces for actions in the types.ts file:

As you know, we considered a basic interface for the action and each action is extended from it according to the payload. And finally, we define a type that combines all the actions we have (now there is only one more and that is ContextAddTodoAction)

Well, we go to the Context.tsx file and start writing reducer and provider

We use useReducer like this:

In the React.Reducer section, we have two parameters for type, the first is our state type, which is an array of ITodos, and the second is the type of actions that were already combined together.

And the reducer is like this:

And also the provider:

Well, there is a problem here, and that is that when we put the initial context type [ITodo], the provider type should also be [ITodo]. But as you can see, the value type is an object.

To solve this problem, we just need to change our context type and it will be like this:

Type is contextualized as an object that has a todos and a dispatch. The dispatch input is an action, and this function does not return anything, void, and the first value is an empty function.

Now we just need to export the context:

as a result

Working with React Context in TypeScript is one of the needs of users, and in this article, we tried to teach you this subject from 0 to 100.

Thank you for being with us so far.

Good luck