CODEWITHSUNDEEP
reactjstypescriptreact-hooksuse-contextuse-reducer
Fernando Soares
Fernando Soares

Reputation: 41

React Hooks w/ Typescript

Yo, everybody! I'm just curious of how I got this to work but I really don't know why it works. Can any one give some techinical explanation?

import { createContext } from 'react'

interface IContext {
  state: any
  dispatch: any
}

export interface ITodoProps {
  todos: [{ id: number; title: string }]
}

export const TodoContext = createContext<IContext>({} as IContext)

If I don't type my empty object with as IContext, Typescript gets REALLY mad at me and I don't know why. Is there some thechinical reason for the particular behaviuour?

Upvotes: 0

Views: 72

Answers (2)

jean182
jean182

Reputation: 3505

The context expects an initial value and in this case you're passing an empty object, as @jtbandes mentioned you could set those attributes optional and passing an empty object will work, but I would say initializing the state to an empty object is not something that you would normally do in react, I'd rather do something like this and take advantage of the null in JS:

import { createContext } from "react";

interface IContext {
  state: any;
  dispatch: any;
}

export interface ITodoProps {
  todos: [{ id: number; title: string }];
}

export const TodoContext = createContext<IContext | null>(null);

This part createContext<IContext | null>(null) is the one that changes and is expecting the initial value that can be null or the interface IContext and in that way you just need to validate if the context value is not null in order to use it, without having to validate every time if the object.property exists.

Upvotes: 0

jtbandes
jtbandes

Reputation: 118671

The error is because your empty object doesn't contain state or dispatch properties.

To change the interface so that an empty object would be allowed, you can make the properties optional:

interface IContext {
  state?: any
  dispatch?: any
}

Upvotes: 2

Related Questions