TypeScript control with stacked HOCs

welcome3.tsx

import * as React from "react";
import {IWithPersonalizationProps, withPersonalization} from "./withPersonalization2";
import {IWithNavigationProps, withNavigation} from "./withNavigation";

// This empty declaration is required
interface IWelcomeOwnProps {}

type IWelcomeProps = IWelcomeOwnProps & IWithNavigationProps & IWithPersonalizationProps;

class Welcome extends React.Component<IWelcomeProps, {}> {

    constructor(props: IWelcomeProps) {
        super(props);
        this.onNameClicked = this.onNameClicked.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div onClick={this.onNameClicked}>Welcome, {this.props.name}!</div>
        );
    }

    private onNameClicked<P>(event: React.MouseEvent<P>) {
        console.log(event);
        event.preventDefault();
        this.props.navigate();
    }

}


export default withNavigation(withPersonalization(Welcome), "/settings");