Javascript 使用 TypeScriptReactJS 的 useContext 的正确类型是什么

我正在将其重构为TypeScript a tutorial/ReactJS，我正在遵循这一点.在大多数情况下，本教程将教您如何重构大部分代码作为额外material .然而，登录部分只在ReactJS/JavaScript年完成，我试图重构代码，以此挑战自己.我被卡住的部分是createContext，因为我无法理解所需的类型.

原始JS代码

JS code - Context/Provider

import React, { useState, createContext } from "react";


export const Context = createContext();

const UserProvider = ({ children }) => {
    const [state, setState] = useState(undefined);

    return (
        <Context.Provider value={[state, setState]}>{children}</Context.Provider>
    )
};

export default UserProvider;

在登录组件上，它被const [_user, setUser] = useContext(Context);调用

我的try

What I've tried

我试图应用以下解决方案，但我对这些概念掌握得不够好，无法成功应用它们:

• Cannot declare React context in typescript? [duplicate]
• Cannot find namespace 'ctx' error when creating Context with react - typescript
• How to use React Context with TypeScript
• React Context + TypeScript — The Easy Way

TS code - Context/Provider

import React, { useState, createContext } from "react";
import { IUser, UserContextType } from "./@types/context";


export const Context = createContext<UserContextType | undefined>(undefined);

const UserProvider: React.FC<React.ReactNode> = ({ children }) => {
    const [state, setState] = useState<IUser>();

    return (
        <Context.Provider value={{state, setState}}>{children}</Context.Provider>
    )
};

export default UserProvider;

TS code - types

export interface IUser {
    user: string;
    password: string;
};

export type UserContextType = {
    state: IUser;
    setState: (newSession: IUser) => void;
};

Errors

<Context.Provider value={{state, setState}}>{children}</Context.Provider>

类型"IUser | undefined"不可分配给类型"IUser".类型"undefined"不能分配给类型"IUser".ts(2322)

const [_user, setUser] = useContext(Context);

类型"UserContextType | undefined"不是数组类型.ts(2461)