我该如何输入正确的AuthCOntextProvider函数，以便在创建Typescript时不会给我错误?

Question

我目前正在学习Typescript，并从Typescript中移动我的项目的所有代码，但我仍然不理解像这样的某些事情。

我只是想正确地输入所有东西，并试图理解它们是如何工作的。

这是我的AuthContext。在整个React应用程序中，该文件可以轻松地为我导出currentUser的值

import React, { createContext, useEffect, useState } from 'react';
import { onAuthStateChanged, User } from 'firebase/auth';
import { auth } from '../firebase.config';
type Props = {
children?: React.ReactNode;
};
type TAuthValue = {
currentUser: User | null;
};
interface TAuthContext extends TAuthValue {
(): JSX.Element;
}
export const AuthContextProvider = ({ children }: Props) => {
const [currentUser, setCurrentUser] = useState<User | null>(null);
useEffect(() => {
const unsub = onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
});
return () => {
unsub();
};
}, []);
return <UserContext.Provider value={{ currentUser }}>{children}</UserContext.Provider>;
};
export const UserContext = createContext<TAuthContext>(AuthContextProvider);

当我尝试这样做时，我收到的错误是:

ERROR in src/context/AuthContext.tsx:29:34
TS2322: Type '{ currentUser: User | null; }' is not assignable to type 'TAuthContext'.
Type '{ currentUser: User | null; }' provides no match for the signature '(): Element'.
27 |     }, []);
28 |
> 29 |     return <UserContext.Provider value={{ currentUser }}>{children}</UserContext.Provider>;
|                                  ^^^^^
30 | };
31 |
32 | export const UserContext = createContext<TAuthContext>(AuthContextProvider);

ERROR in src/context/AuthContext.tsx:32:56
TS2345: Argument of type '({ children }: Props) => JSX.Element' is not assignable to parameter of type 'TAuthContext'.
Property 'currentUser' is missing in type '({ children }: Props) => JSX.Element' but required in type 'TAuthContext'.
30 | };
31 |
> 32 | export const UserContext = createContext<TAuthContext>(AuthContextProvider);
|                                                        ^^^^^^^^^^^^^^^^^^^
33 |

我已经尝试反转哪个类型/接口扩展哪个，但它们仍然提供错误。我看了文档，但我仍然不确定我做错了什么。任何指导或指针在哪里看或解释将非常感激!

Answer 1

将整个组件传递给createContext。但是在使用上下文时，您将在valueprop中传递currentUser。currentUser的类型为User | null。您的上下文类型为(): JSX.Element，显然没有重叠。理想情况下，UserContext的类型应该是User | null

查看如何使用Context的文档

export const UserContext = createContext<User | null>(null);