泛型类型下向React Provider传递值的类型问题

问题根源 #

你当前的实现存在两个核心问题：

• useAppDependencies 每次调用都要求手动传入泛型 <T,U>，但子组件无法知晓上层Provider实际传入的类型，导致类型丢失降级为unknown
• 初始Context使用AppDependencies<any, any>，破坏了TypeScript的类型约束严谨性

解决方案 #

我们需要让Context自动继承Provider传入值的类型，同时让Hook无需手动指定泛型就能获取正确类型。下面是两种可行方案：

方案一：利用类型扩展锁定全局类型（单应用推荐） #

这种方式适合单应用场景，能让所有子组件自动识别Provider的类型：

1. 先在共享文件中定义基础结构和占位类型：

// src/app-context.ts
import React, { createContext, useContext, ReactNode } from 'react';

// 定义基础接口
export interface AppDependencies<T, U> {
  somethingWithType: T;
  somethingWithOtherType: U;
}

// 先定义一个占位类型，后续在入口处覆盖
export type ConcreteAppDependencies = AppDependencies<unknown, unknown>;

// 创建Context时使用占位类型，添加undefined处理
const Context = createContext<ConcreteAppDependencies | undefined>(undefined);

interface AppDependenciesProviderProps {
  value: ConcreteAppDependencies;
  children: ReactNode;
}

export const AppDependenciesProvider = ({ value, children }: AppDependenciesProviderProps) => {
  return <Context.Provider value={value}>{children}</Context.Provider>;
};

export const useAppDependencies = () => {
  const context = useContext(Context);
  if (!context) {
    throw new Error('useAppDependencies 必须在 AppDependenciesProvider 内部使用');
  }
  return context;
};

2. 在应用入口处，用实际值的类型覆盖占位类型：

// src/index.tsx
import { AppDependencies, ConcreteAppDependencies, AppDependenciesProvider } from './app-context';

// 假设这是你的实际业务值
const somethingWithType = { id: 1, name: 'test' };
const somethingWithOtherType = ['a', 'b', 'c'];

// 生成具体业务类型
type ActualAppDependencies = AppDependencies<typeof somethingWithType, typeof somethingWithOtherType>;

// 扩展模块，覆盖占位类型
declare module './app-context' {
  export type ConcreteAppDependencies = ActualAppDependencies;
}

const appDependencies: ActualAppDependencies = {
  somethingWithType,
  somethingWithOtherType
};

render(
  <AppDependenciesProvider value={appDependencies}>
    <Main />
  </AppDependenciesProvider>,
  rootEl
);

这样所有子组件调用useAppDependencies()时，都会自动获得ActualAppDependencies的具体类型，无需手动传泛型。

方案二：泛型上下文的类型推断（多场景复用推荐） #

如果需要支持多场景不同类型的Provider，可以调整实现，让Hook通过泛型约束自动推断类型：

// src/app-context.ts
import React, { createContext, useContext, ReactNode, useMemo } from 'react';

export interface AppDependencies<T, U> {
  somethingWithType: T;
  somethingWithOtherType: U;
}

// 创建无类型约束的Context，后续通过Provider注入具体类型
const Context = createContext<unknown>(undefined);

interface AppDependenciesProviderProps<T, U> {
  value: AppDependencies<T, U>;
  children: ReactNode;
}

export const AppDependenciesProvider = <T, U>({ value, children }: AppDependenciesProviderProps<T, U>) => {
  // 用useMemo确保上下文值的稳定性
  const contextValue = useMemo(() => value, [value]);
  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
};

// Hook中通过泛型约束获取类型
export const useAppDependencies = <T, U>() => {
  const context = useContext(Context);
  if (!context) {
    throw new Error('useAppDependencies 必须在 AppDependenciesProvider 内部使用');
  }
  return context as AppDependencies<T, U>;
};

在子组件中调用时，需要明确指定泛型（或复用入口处定义的类型）：

// src/components/Main.tsx
import { useAppDependencies } from '../app-context';
// 从入口处导出预定义的具体类型
import { ActualAppDependencies } from '../index';

const Main = () => {
  // 方式1：手动指定类型
  const deps = useAppDependencies<typeof somethingWithType, typeof somethingWithOtherType>();
  // 方式2：使用预定义的具体类型
  const deps = useAppDependencies() as ActualAppDependencies;
  
  // 现在可以正常访问属性，类型完全提示
  console.log(deps.somethingWithType.id);
  return <div>...</div>;
};

关键注意事项 #

• 避免在Context初始值中使用any，优先用unknown或明确的类型占位，防止类型污染
• 必须在Hook中添加空值检查，避免在Provider外部调用Hook导致运行时错误
• 单应用场景选方案一，无需子组件手动指定类型；多场景复用Provider选方案二，灵活性更高

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