React-Typescript中的非对象变量上出现“object可能未定义”错误

Question

所以我找到了另外5-6个问题，我实际上是用“！”运算符，所以不要删除重复的问题，但我不理解的是，变量不是对象。这就是背景；

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;

例如，下面是我定义毫秒的App.js；

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;

所以在我做这件事的地方，在组件中使用毫秒；

const { miliSeconds } = useContext(PlanetContext);

它说“对象可能是未定义的”，这对我来说没有任何意义。因为它从来都不是一个物体。那么，除了在应用程序中到处放置感叹号之外，还有什么解决方案吗？

Answer 1

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

我认为这段代码会导致定义上下文的类型不等于ContextProps，但所有对象字段都可能是未定义的。部分util类型可以做到这一点。然后，即使您在使用应用程序组件之前定义了上下文的值，typescript对此一无所知，并从Partical中推断出毫秒类型为1，因此它将为number | undefined