Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to get a class component type and add props to it's type?

$
0
0

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)

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>