'Object is possibly Undefined' error on a non-object variable in React-Typescript

Question

So I found the 5-6 other questions I actually kinda fixed it with " ! " operator, so don't delete the question for duplication, but what I don't understand is the variable is not an object. So this is the context;

import { createContext } from "react";

interface PlanetInfos {
  planetName: string;
  radius: string;
  distanceFromSun?: string;
  numberOfMoons?: string;
  averageTemperature: string;
  svg: string;
}

type ContextProps = {
  miliSeconds: number;
  setmiliSeconds: any;
  planetInfos: PlanetInfos[];
};

const PlanetContext = createContext<Partial<ContextProps>>({});

export default PlanetContext;

here is the App.js where I define the miliseconds for example;

const App: React.FC = () => {
  const [miliSeconds, setmiliSeconds] = useState(10000);

  return (
    <PlanetContext.Provider
      value={{
        miliSeconds,
        setmiliSeconds,
        planetInfos,
      }}
    >
      <div className="App">
        <SideBar />
        <Planets />
      </div>
    </PlanetContext.Provider>
  );
};

export default App;

So in wherever I do this and use miliseconds somewhere in the component;

const { miliSeconds } = useContext(PlanetContext);

It says "Object is possibly undefined" and it doesn't make sense for me. Because it was never an object. So is there any solution besides putting exclamation mark everywhere in the app?

It is because you used partial : Partial<ContextProps>. Partials makes everything "optional" = the type you mentioned or "undefined" — Ajeet Shah
– Ajeet Shah, Commented Mar 11, 2021 at 19:35
If none of the properties is supposed to be "undefiend", you don't need to use Partial, you can write : createContext<ContextProps>({} as ContextProps) ; or perhaps createContext({} as ContextProps) ; — Ajeet Shah
– Ajeet Shah, Commented Mar 11, 2021 at 19:47
And you can improve : setmiliSeconds: (ms: number) => void — Ajeet Shah
– Ajeet Shah, Commented Mar 11, 2021 at 19:50
oh man thanks, this kinda resolved everything. just couldn't get the ms stuff in the parameter though — İlker
– İlker, Commented Mar 11, 2021 at 19:58
no, I change the createContext as you said and didn't get any errors. I removed the partial — İlker
– İlker, Commented Mar 11, 2021 at 20:02

Denis Gutarin · Accepted Answer · 2021-03-11 19:42:18Z

2

 createContext<Partial<ContextProps>>({});

I think this code leads to define the type of the context not equals to ContextProps, but all object fields will be possibly undefined. Partial util type does this. Then, even if you define values for the context in App component before using it, typescript knows nothing about this, and infer a type of milliseconds as one from Partical, so it will be number | undefined

answered Mar 11, 2021 at 19:42

Denis Gutarin

212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

'Object is possibly Undefined' error on a non-object variable in React-Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related