Typescript如何将属性类型定义为类型类型?

时间:2019-11-22 14:56:49

标签: typescript react-native types

所以我正在努力解决这个问题,或者找出是否有可能,

所以我正在尝试创建一组将在React Native App中使用的Types,但是这个问题与Typescript有关。

所以我遇到了一个问题:在我的代码中,我有changeMainComponent(Component: SomeType): void;,其中某些类型当前错误地作为ComponentViewInterface<P,S,SS>,我真正需要的是Component成为实现{{1 }}

我尝试使用ComponentViewInterface<P,S,SS>;作为类型,但给我一个错误,提示typeof ComponentViewInterface<P,S,SS>

下面的代码用于显示我的完整用例

'ComponentViewInterface' only refers to a type, but is being used as a value here.

App.tsx(应用入口点)

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

WelcomeScreen.tsx

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

0 个答案:

没有答案