TypeScript 中使用 React.useContext 时的类型定义问题及解决方法

在 React 应用中，我们经常使用 context API 来进行组件间的通信。而在使用 TypeScript 进行开发时，使用 React.useContext 时可能会遇到类型定义的问题。本文将介绍这个问题的解决方法，并附上示例代码。

问题描述

在使用 React.useContext 时，我们会遇到类型定义的问题。例如，在下面的例子中：

// javascriptcn.com 代码示例
interface User {
  name: string;
  age: number;
}

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

function App() {
  const user = React.useContext(UserContext);

  return (
    <div>
      <h1>Hello, {user.name}!</h1>
      <p>You are {user.age} years old.</p>
    </div>
  );
}

在上面的代码中，我们创建了一个 UserContext，它的值是 User 类型或 null。然后在 App 组件中，我们使用 React.useContext 来获取 UserContext 的值，并将它赋值给 user 变量。

但是，TypeScript 会报错，提示 user 变量可能为 null，而我们在使用 user 变量时没有进行 null 判断，这可能导致运行时错误。

这个问题的原因是，React.useContext 返回的值的类型是 User | null，而 TypeScript 不知道我们已经在上面的 UserContext 中定义了它的类型。

解决方法

为了解决这个问题，我们需要告诉 TypeScript React.useContext 返回的值的类型。我们可以使用泛型来实现这个目标。

在上面的例子中，我们可以将 React.useContext 的泛型参数设置为 User | null，如下所示：

const user = React.useContext<User | null>(UserContext);

这样，TypeScript 就会知道 user 变量的类型，它不会再提示 user 变量可能为 null 的错误了。

示例代码

下面是一个完整的示例代码，它演示了如何在 TypeScript 中使用 React.useContext：

// javascriptcn.com 代码示例
import React from "react";

interface User {
  name: string;
  age: number;
}

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

function App() {
  const user = React.useContext<User | null>(UserContext);

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Hello, {user.name}!</h1>
      <p>You are {user.age} years old.</p>
    </div>
  );
}

function UserProfile() {
  const user = {
    name: "John Doe",
    age: 30,
  };

  return (
    <UserContext.Provider value={user}>
      <App />
    </UserContext.Provider>
  );
}

export default UserProfile;

在上面的代码中，我们创建了一个 UserContext，它的值是 User 类型或 null。然后我们在 App 组件中使用 React.useContext 来获取 UserContext 的值，并将它赋值给 user 变量。

如果 user 变量为 null，则显示 "Loading..."，否则显示用户的名字和年龄。

最后，我们在 UserProfile 组件中将 user 对象作为 UserContext 的值，并将 App 组件作为子组件传递给 UserContext.Provider。

总结

在 TypeScript 中使用 React.useContext 时，我们需要告诉 TypeScript 返回值的类型。这可以通过使用泛型来实现。在定义 React.createContext 的时候，我们需要指定它的类型，以便在使用时可以正确地推断类型。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65754cb8d2f5e1655de75421