React Hooks w/ Typescript-CodePudding

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?

CodePudding user response：

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
}

CodePudding user response：

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.