So I'm struggling a little to work this out or find out if it's even possible,
So I'm trying to create a set of Types that are to be used in a React Native App, but this question relates to Typescript.
So I'm having a problem of: in my code I have changeMainComponent(Component: SomeType): void;
Where some type is currently incorrectly as ComponentViewInterface<P,S,SS>
what I actually need is for Component to be a Class that implements ComponentViewInterface<P,S,SS>
I have tried to use typeof ComponentViewInterface<P,S,SS>
; as the type but that gives me an error saying 'ComponentViewInterface' only refers to a type, but is being used as a value here.
The Code below is to show my full use case if needed
import React from 'react';
import {Dimensions} from 'react-native';
export interface ComponentViewInterface<ComponentPropertes, S, SS> extends React.Component<ComponentPropertes, S, SS>{
}
export interface ComponentAppInterface<P={},S={}, SS={}> extends React.Component<P,S,SS>{
changeMainComponent(Component: ComponentViewInterface<P,S,SS>): void;
}
export default interface ComponentPropertes<P={}, S={}, SS={}>{
app:{
Width: number;
Height: number;
}
Frame: ComponentAppInterface<P, S, SS>;
}
export function CreateDefaultProperties<P, S, SS>(Component: ComponentAppInterface<P, S, SS>): ComponentPropertes<P, S, SS>{
let ret:ComponentPropertes<P, S, SS> = {
app:{
Width: Dimensions.get('window').width,
Height: Dimensions.get('window').height,
},
Frame: Component
}
return ret;
}
App.tsx (app entry point)
import React from 'react';
import { ComponentAppInterface, CreateDefaultProperties } from './src/interface/AppProps';
import {View, Button, Text} from 'react-native';
import WelcomeScreen from './src/Screens/WelcomeScreen'
export default class TestApp extends React.Component<{},{},any> implements ComponentAppInterface<{},{},any>{
public changeMainComponent(component: any){
this.setState({MainComponent:component});
}
public state = {
MainComponent: WelcomeScreen
}
public render(){
return (<View>
<this.state.MainComponent {...CreateDefaultProperties(this)}/>
</View>)
}
}
WelcomeScreen.tsx
import React from 'react';
import { ComponentAppInterface, CreateDefaultProperties, ComponentViewInterface } from './src/interface/AppProps';
import {View, Button, Text} from 'react-native';
import WelcomeScreen from './src/Screens/WelcomeScreen'
export default class TestApp extends React.Component<{},{},any> implements ComponentAppInterface<{},{},any>{
public changeMainComponent(component: ComponentViewInterface<{},{},any>){
this.setState({MainComponent:component});
}
public state = {
MainComponent: WelcomeScreen
}
public render(){
return (<View>
<this.state.MainComponent {...CreateDefaultProperties(this)}/>
</View>)
}
}