类型React：类型&#39;profile&#39;的参数不能分配给&#39;ComponentType类型的参数 <never> &#39;

Question

I'm new to typescript and this issues has me stumped. Here's my code.

import { IProps, IState }   from './types';

class Profile extends Component<RouteComponentProps & IProps, IState>{
    state: IState = {
        form: {
            first_name: this.props.user.first_name,
            last_name : this.props.user.last_name,
            email     : this.props.user.email,
            phone     : this.props.user.phone || ''
        },

        isLoading: false
    };

    validator = new SimpleReactValidator({autoForceUpdate: true});


    render () {
        const { user } = this.props;
        const { form, isLoading } = this.state;

        return (<div></div>)
    }
}

export default Profile;

These are my types:

export interface IState {
    form: {
        [key: string]: any;
    };

    isLoading: boolean;
}

export interface IProps {
    children?: Element;
    user    : any;
}

And this is my index.ts:

import Profile       from './pages/profile/Profile';

const mapStateToProps = (state: IAppState) => {
    return {
        user: state.Auth.user
    };
};

export default connect(mapStateToProps)(Profile);

My code editor highlights that (Profile) as an error.

My terminal throws out the following error:

Argument of type 'typeof Profile' is not assignable to parameter of type >'ComponentType'. Type 'typeof Profile' is not assignable to type 'ComponentClassany>'.

I'd like to know if there is a code change I can make here to fix this Typescript "error".

Answer 1

import { IProps, IState }   from './types';
import {connect} from "react-redux"

class Profile extends Component<RouteComponentProps & IProps, IState>{
    state: IState = {
        form: {
            first_name: this.props.user.first_name,
            last_name : this.props.user.last_name,
            email     : this.props.user.email,
            phone     : this.props.user.phone || ''
        },

        isLoading: false
    };

    validator = new SimpleReactValidator({autoForceUpdate: true});


    render () {
        const { user } = this.props;
        const { form, isLoading } = this.state;

        return (<div></div>)
    }
}


const mapStateToProps = (state: IAppState) => {
    return {
        user: state.Auth.user
    };
};

export default connect(mapStateToProps)(Profile);