如何在泛型组件被使用前预先传入类型？

问题背景 #

现有泛型组件：

export const ComponentsOverrideContextProvider= <M extends Record<any, any>>({children, components}: {children: React.ReactNode, components: M}) => {
  return <ComponentOverrideContext.Provider value={{ ...components }}>{children}</ComponentOverrideContext.Provider>;
} 

为避免绑定特定实现，导出了通用实例：

export const ConcreteProvider = ComponentsOverrideContextProvider;

需求是在用户使用ConcreteProvider前提前配置好类型，无需用户手动写<ConcreteProvider<Type>>指定泛型。

可行解决方案 #

方案1：封装类型固化的包装组件 #

直接编写一个绑定了目标类型的包装组件，内部复用原泛型组件：

// 定义你需要的具体组件类型
type TargetComponents = {
  Button: React.ComponentType<{ label: string }>;
  Input: React.ComponentType<{ placeholder: string }>;
};

// 包装成已固化类型的Provider
export const ConcreteProvider = ({ children, components }: { children: React.ReactNode, components: TargetComponents }) => {
  return <ComponentsOverrideContextProvider<TargetComponents> children={children} components={components} />;
};

用户使用时，components参数会自动匹配TargetComponents的类型约束，无需手动指定泛型。

方案2：用类型断言直接固化组件类型 #

如果不想额外编写包装函数，可通过类型断言直接为ConcreteProvider绑定目标类型：

type TargetComponents = {
  Button: React.ComponentType<{ label: string }>;
  Input: React.ComponentType<{ placeholder: string }>;
};

// 将通用Provider断言为绑定了TargetComponents的组件
export const ConcreteProvider = ComponentsOverrideContextProvider as typeof ComponentsOverrideContextProvider<TargetComponents>;

这种方式更简洁，同样能让用户使用时自动获得类型提示，无需手动传递泛型参数。

方案3：工厂函数生成带类型的Provider #

若需要支持多套不同类型的Provider，可编写工厂函数批量生成：

// 定义工厂函数类型
type ProviderFactory = <M extends Record<any, any>>() => typeof ComponentsOverrideContextProvider<M>;

export const createTypedProvider: ProviderFactory = () => ComponentsOverrideContextProvider;

// 配置阶段生成绑定目标类型的Provider
type TargetComponents = { /* 自定义类型 */ };
export const ConcreteProvider = createTypedProvider<TargetComponents>();

此方案适合需要创建多种类型Provider的场景，只需在配置时指定一次类型，用户直接使用即可。

说明 #

以上三种方案均能实现提前配置类型的需求，用户使用ConcreteProvider时，TypeScript会自动推导components的类型约束，无需手动添加泛型参数，可根据实际场景选择最合适的实现方式。

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