如何扩展Class Component的Props类型？基于React Native Video与Mux

要解决@mux/mux-data-react-native-video无TypeScript支持的问题，同时避免硬复制组件类型导致版本更新失效，可以通过以下泛型类型实现自动合并额外Props到原组件类型：

1. 定义Mux配置接口 #

先明确需要新增的muxOptions类型：

interface MuxOptions {
  muxOptions: {
    envKey: string; // Mux环境密钥，必填
    videoId?: string; // 可选视频ID
    // 其他Mux所需配置字段可在此扩展
  };
}

2. 实现泛型合并类型 #

这个泛型会自动提取原组件的Props和State，将额外接口合并到Props中，同时保留原组件的所有实例方法：

import React from 'react';

/**
 * 合并额外接口到React类组件的Props中
 * @template C - 原React类组件的构造函数类型
 * @template T - 需要合并的额外Props接口
 */
type MergeInterfaceIntoComponentProps<
  C extends React.ComponentClass<any>,
  T extends object
> = React.ComponentClass<React.ComponentProps<C> & T, React.ComponentState<C>> & InstanceType<C>;

泛型逻辑说明： #

• React.ComponentProps<C>：提取原组件的Props类型
• React.ComponentState<C>：保留原组件的State类型
• InstanceType<C>：继承原组件的所有实例方法（比如seek、presentFullscreenPlayer等）
• 交叉类型确保新组件同时具备合并后的Props和原组件的所有实例特性

3. 使用泛型定义MuxVideo类型 #

import Video from 'react-native-video';
import muxReactNativeVideo from 'mux-react-native-video-sdk';

// 生成合并后的组件类型
type MuxVideoType = MergeInterfaceIntoComponentProps<typeof Video, MuxOptions>;

// 类型安全地创建Mux包装后的组件
const MuxVideo: MuxVideoType = muxReactNativeVideo(Video);

这样定义后，MuxVideo会自动继承react-native-video的所有原有Props和方法，同时支持新增的muxOptions参数，且后续react-native-video版本更新时，只要组件类型结构不变，无需手动修改类型定义。

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