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

Typescript How to define a property type as type of type?

$
0
0

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>)
    }
}

Viewing all articles
Browse latest Browse all 6208

Trending Articles



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