TypeScript中消费Context时如何避免重复声明类型？

你遇到的核心问题是创建Context时未明确类型，导致useContext返回any，不得不在消费组件重复声明类型。解决思路是在Context定义阶段就完成类型绑定，让TypeScript自动推断消费时的类型，避免冗余。

问题重现 #

Context文件代码：

import { createContext, useState, ReactNode } from 'react';

const TasksContext = createContext({}); // 默认类型为any

export const TasksProvider = ({ children }: { children: ReactNode }) => {
  const [name, setName] = useState("");
  const updateName = (name: string) => {
    setName(name);
  };

  return (
    <TasksContext.Provider
      value={{
        name,
        updateName
      }}>
      {children}
    </TasksContext.Provider>
  );
};

export default TasksContext;

消费组件代码：

import TasksContext from '../../context/TasksContext';
import { useContext } from 'react';

const { updateName } = useContext(TasksContext);

<Switch
  onValueChange={() => {
    updateName(57); // 无类型报错，因为updateName是any类型
  }}
/>

解决方案：在Context定义阶段绑定类型 #

有两种常用方式，都能让TypeScript自动推断消费时的类型，且后续修改Context结构时无需逐个更新消费组件的类型：

方式1：手动定义Context类型（更直观）

import { createContext, useState, useContext, ReactNode } from 'react';

// 1. 明确定义Context的结构类型
type TasksContextType = {
  name: string;
  updateName: (name: string) => void;
};

// 2. 创建Context时指定类型，默认值设为null（需配合自定义Hook做非空校验）
const TasksContext = createContext<TasksContextType | null>(null);

export const TasksProvider = ({ children }: { children: ReactNode }) => {
  const [name, setName] = useState("");
  const updateName = (name: string) => {
    setName(name);
  };

  return (
    <TasksContext.Provider
      value={{
        name,
        updateName
      }}>
      {children}
    </TasksContext.Provider>
  );
};

// 3. 导出自定义Hook，封装useContext并做非空判断
export const useTasksContext = () => {
  const context = useContext(TasksContext);
  if (!context) {
    throw new Error('useTasksContext必须在TasksProvider内部使用');
  }
  return context;
};

消费组件使用时，直接调用自定义Hook，无需额外声明类型：

import { useTasksContext } from '../../context/TasksContext';

const { updateName } = useTasksContext();

<Switch
  onValueChange={() => {
    updateName(57); // TypeScript直接报错：参数类型number不能赋值给string
  }}
/>

方式2：自动推断Context类型（更灵活）

如果不想手动写类型，可以让TypeScript从Provider的value自动推断：

import { createContext, useState, useContext, ReactNode } from 'react';

export const TasksProvider = ({ children }: { children: ReactNode }) => {
  const [name, setName] = useState("");
  const updateName = (name: string) => {
    setName(name);
  };

  // 先把value存为变量，方便TS推断类型
  const contextValue = {
    name,
    updateName
  };

  return (
    <TasksContext.Provider value={contextValue}>
      {children}
    </TasksContext.Provider>
  );
};

// 从contextValue自动推断类型
type TasksContextType = typeof contextValue;

// 创建Context并指定类型
const TasksContext = createContext<TasksContextType | null>(null);

// 同样导出自定义Hook做非空校验
export const useTasksContext = () => {
  const context = useContext(TasksContext);
  if (!context) {
    throw new Error('useTasksContext必须在TasksProvider内部使用');
  }
  return context;
};

为什么这能解决问题？ #

之前的代码中，createContext({})没有指定类型，默认是any，所以useContext返回的也是any，自然没有类型检查。通过在创建Context时绑定明确的类型，TypeScript就能在消费时自动识别每个属性的类型，既保证了类型安全，又避免了重复声明类型的冗余。后续修改Context的结构（比如给updateName新增参数），所有消费组件都会自动获得更新后的类型提示，无需手动修改。

内容的提问来源于stack exchange，提问作者user2144363