使用 null 作为初始值时，`React.createContext(null)` 的打字稿类型答案

【问题标题】：Typescript type for `React.createContext(null)` when using null for initial value使用 null 作为初始值时，`React.createContext(null)` 的打字稿类型
【发布时间】：2020-12-04 09:54:10
【问题描述】：

我有一个用来从useContext 获取值的钩子

使用Firebase.js

import React, { useContext } from 'react';

export const FirebaseContext = React.createContext(null);

function useFirebase(): firebase.app.App {
  const firebase = useContext(FirebaseContext);
  return firebase;
}

export default useFirebase;

这是上下文提供者：

App.js

import { FirebaseContext } from '@hooks/useFirebase';

function App() {
  return(
    <FirebaseContext.Provider value={props.firebase}>
      // The app
    </FirebaseContext.Provider>
  );
}

然后我通过以下方式访问整个应用程序：

SomeComponent.ts

const firebase = useFirebase();

问题

在useFirebase.ts 文件中，我在null 之间遇到了问题，它在React.createContext(null) 中初始化

我怎样才能摆脱这种冲突？

注意： props.firebase 类型为 firebase.app.App

我通常用null 打电话给createContext，这就是Typescript 抱怨的原因。

以下代码似乎可以解决问题，但我不想使用 {} 代替 null。

export const FirebaseContext = React.createContext({} as firebase.app.App);

【问题讨论】：

你试过createContext<App | null>(null)吗？

标签： reactjs typescript typescript-typings react-context use-context

【解决方案1】：

尝试输入createContext：

const FirebaseContext = React.createContext<firebase.app.App | null>(null);

有关更多有用信息，请参阅React TS Cheatsheet。

【讨论】：