I'm using react-native-video together with @mux/mux-data-react-native-video.
Mux is used to wrap react-native-video's Video component to add data analytics features to it, so it's basically a wrapper that add extra props (e.g. muxOptions
)
But mux's library don't have typescript support and I'm trying to type.
To use mux you basically do this:
import Video from 'react-native-video';import muxReactNativeVideo from 'mux-react-native-video-sdk';// wrap the `Video` component with Mux functionalityconst MuxVideo = muxReactNativeVideo(Video);
and then MuxVideo
should have the same type as Video
but with one extra prop that I'm going to create the types myself (muxOptions
).
But the problem comes to how can I extend the props of the Video
component
Video
(react-native-video) component's type:
export default class Video extends React.Component<VideoProperties> { seek(time: number, tolerance?: number): void; presentFullscreenPlayer(): void; dismissFullscreenPlayer(): void;}
What I want is to create a type that uses typeof Video
but adds an interface that I will create (e.g. MuxOptions
) to the props.
So the final result would be something like
// the same type but with MuxOptionsexport default class Video extends React.Component<VideoProperties & MuxOptions> { seek(time: number, tolerance?: number): void; presentFullscreenPlayer(): void; dismissFullscreenPlayer(): void;}
I do understand that I could just copy paste the type of Video
and add MuxOptions
(just like the example above), but I don't want to do that because if the type of Video
is changed in future versions of react-native-video
, the types will break.
What I would like is just some generic type that merges an interface into the component props (and the hard part is that it's a class component).
Something like
interface MuxOptions { /* ... */ }type MuxVideoType = MergeInterfaceIntoComponentProps<typeof Video, MuxOptions>// MuxVideo is the same as Video, but with MuxOptions on it's propsconst MuxVideo: MuxVideoType = muxReactNativeVideo(Video)