RouterUsage.ts

interface RouteProps {
    search: {};
    urlParams: {};
}

interface Data{
    a: number;
}

interface AppProps extends RouteProps {
    data: Data;
}

interface TournamentUrlParams {
    id: number
}

interface TournamentProps extends AppProps {
    urlParams: TournamentUrlParams;
    search: {boom: number, self: number} 
}

interface TournamentStandingsUrlParams extends TournamentUrlParams{
    id: number; teamId: number
}

interface TournamentStandingsProps extends TournamentProps{
    urlParams: TournamentStandingsUrlParams;
     
}

class Component<P> {
    props: P;
}

interface X<U, S>{
    search: S;
    urlParams: U;
}


interface Props<P, S> {
    urlParams: P;
    search: S;
}
class Route<P, S>{
    params: P;
    search: S;
    goto(params: P, search?: S) {
        
    }
    constructor(public component: new () => Component<Props<P, S>>) {

    }

    addChild<PP extends P, SS extends S>(component: new () => Component<Props<PP, SS>>) {
        return new Route<P, S>(component);
    }
}



class App extends Component<AppProps>{
    static resolve() {

    }
}

class Tournament extends Component<TournamentProps>{
    render() {
        tournamentRoute.goto({id: 2});
    }
}

class TournamentStandings extends Component<TournamentStandingsProps>{
    render() {
        tournamentRoute.goto({id: 2});
    }
}


var indexRoute = new Route(App);
var tournamentRoute2 = new Route(Tournament);
tournamentRoute2.params.id;
tournamentRoute2.search.boom
var tournamentRoute = indexRoute.addChild(Tournament);
var tournamentStandingRoute = indexRoute.addChild(TournamentStandings);
// tournamentRoute.goto({x:1})