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

Posted 2023-04-14

【中文标题】使用 null 作为初始值时，`React.createContext(null)` 的打字稿类型

【英文标题】：Typescript type for `React.createContext(null)` when using null for initial value

【发布时间】：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)吗？

【参考方案1】：

尝试输入createContext：

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

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