javascript - 使用 TypeScript/ReactJS 的 useContext 的正确类型是什么？

Question

我正在重构为 TypeScript tutorial在我关注的 ReactJS 中。在大多数情况下，本教程将教您如何重构大部分代码作为奖励 Material 。然而，登录部分仅在 ReactJS/JavaScript 中完成，我试图重构我的代码作为挑战自己的一种方式。我坚持的部分是 createContext，因为我无法理解所需的类型。

原始JS代码

JS 代码 - 上下文/提供者

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);

我的尝试

我尝试过的

我尝试应用以下解决方案，但我并没有真正很好地掌握这些概念以成功应用它们:

• 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 代码 - 上下文/提供者

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 代码 - 类型

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

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

错误

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

Type 'IUser | undefined' is not assignable to type 'IUser'. Type 'undefined' is not assignable to type 'IUser'.ts(2322)

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

Type 'UserContextType | undefined' is not an array type.ts(2461)

Answer 1

首先，你像这样声明上下文类型:

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

这意味着上下文的 value 要么是一个具有 UserContextType 的所有属性的对象，要么是 undefined。

然后在这里:

const [state, setState] = useState<IUser>();

您创建了类型为 IUser 的状态。但是因为你没有提供默认值，所以默认值为undefined。这已添加到州的类型中。所以 state 是类型 IUser |未定义。

然后我们到了这里:

value={{state, setState}}

state 是 IUser | undefined，但上下文类型需要该属性的 IUser[]。所以 IUser 或 undefined 都不是那里的有效类型。

---

首先，您需要确保如果您传入的是一个对象，那么该对象的类型是正确的。这意味着它具有所有必需的属性。否则，传入未定义的。你可以用三元表达式来做到这一点:

value={state ? {state, setState} : undefined}

现在如果状态有一个值，那么上下文值被创建并传递给它。否则上下文值为 undefined。

---

但是现在你得到这个错误:

    Types of property 'state' are incompatible.
      Type 'IUser' is missing the following properties from type 'IUser[]': length, pop, push, concat, and 26 more.(2322)

这是因为您试图将单个用户 IUser 分配给一组用户 IUser[]。

看起来你的意思是内容只包含一个用户，所以你可能想将上下文类型更改为:

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

哪个有效，see playground

或者你需要传入一个用户数组:

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

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

这也有效，see playground

---

您还可以将上下文类型更改为:

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

这使得 state 成为可选的，然后:

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

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

应该可以正常工作，see playground