A typesafe router sketch

router-idea.ts

interface RouteVariable<T> {
  parse(value: string): { value: T, rest: string } | false;
}

const int: RouteVariable<number> = undefined as any;
const segment: RouteVariable<string> = undefined as any;

type RouteVariables<T> = { [K in keyof T]: RouteVariable<T[K]> };

type AddRoute<R> = <T extends any[]>(
  literals: TemplateStringsArray,
  ...placeholders: RouteVariables<T>
) => (render: (...args: T) => R) => void;

class Router<R> {
  public route!: AddRoute<R>;

  constructor(configure: (route: AddRoute<R>) => void) {
    configure(this.route);
  }

  resolve(path: string): R | null {
    throw new Error("Not implemented");
  }
}

// 1. Add routes

// At construction time
const router = new Router<React.ReactElement<any>>(route => {
  route`/user/${int}`(id => <div>User {id}</div>);

  route`/user/${segment}/comments/${int}`((userName, commentId) => <div />);
});

// After construction
router.route`/user/${segment}/comments/${int}/edit`(
  (userName, commentId) => <div />,
);

// 2. Ask the router to resolve a path
router.resolve("/user/1"); // Returns <div User 1</div>