Closed2024/03/05にクローズ8

TanStack Router の path の型を取りたい

Tanstack Router の Link to で利用されてる path の型を取りたい。

型がだいぶ複雑だが巡っていく。

ToPathOption ってやつだな。

export type ToSubOptions<TRouteTree extends AnyRoute = RegisteredRouter['routeTree'], TFrom extends RoutePaths<TRouteTree> | string = string, TTo extends string = ''> = {
    to?: ToPathOption<TRouteTree, TFrom, TTo>;
    hash?: true | Updater<string>;
    state?: true | NonNullableUpdater<HistoryState>;
    from?: RoutePathsAutoComplete<TRouteTree, TFrom>;
} & CheckPath<TRouteTree, {}, TFrom, TTo> & SearchParamOptions<TRouteTree, TFrom, TTo> & PathParamOptions<TRouteTree, TFrom, TTo>;

`ToPathOption`

export type ToPathOption<TRouteTree extends AnyRoute = AnyRoute, TFrom extends RoutePaths<TRouteTree> | string = string, TTo extends string = ''> = TTo | RelativeToPathAutoComplete<TRouteTree, NoInfer<TFrom> extends string ? NoInfer<TFrom> : '', NoInfer<TTo> & string>;

RelativeToPathAutoComplete<TRouteTree, NoInfer<TFrom> extends string ? NoInfer<TFrom> : '', NoInfer<TTo> & string>;

次は、RelativeToPathAutoComplete をみる

`RelativeToPathAutoComplete`

export type RelativeToPathAutoComplete<TRouteTree extends AnyRoute, TFrom extends string, TTo extends string, TPaths = RoutePaths<TRouteTree>> = TTo extends `..${string}` ? RelativeToParentPathAutoComplete<TFrom, RemoveTrailingSlashes<TTo>, TPaths> : TTo extends `./${infer TRestTTo}` ? RelativeToCurrentPathAutoComplete<TFrom, RemoveTrailingSlashes<TTo>, TRestTTo, TPaths> : AbsolutePathAutoComplete<TFrom, TPaths>;

prettier かける

export type RelativeToPathAutoComplete<
  TRouteTree extends AnyRoute,
  TFrom extends string,
  TTo extends string,
  TPaths = RoutePaths<TRouteTree>,
> = TTo extends `..${string}`
  ? RelativeToParentPathAutoComplete<TFrom, RemoveTrailingSlashes<TTo>, TPaths>
  : TTo extends `./${infer TRestTTo}`
    ? RelativeToCurrentPathAutoComplete<
        TFrom,
        RemoveTrailingSlashes<TTo>,
        TRestTTo,
        TPaths
      >
    : AbsolutePathAutoComplete<TFrom, TPaths>;

RoutePaths<TRouteTree> ってのが気になるな

`RoutePaths<TRouteTree>`

export type RoutePaths<TRouteTree extends AnyRoute> = ParseRoute<TRouteTree>['fullPath'] | '/';

RouteTree の型をとってきて、RoutePaths に渡してあげればいけそう

RouteTree の型を取りたい

export interface Register {
}
export type AnyRouter = Router<AnyRoute, any>;
export type RegisteredRouter = Register extends {
    router: infer TRouter extends AnyRouter;
} ? TRouter : AnyRouter;

RegisteredRouter に Register interface に渡した typeof router が入るわけか。

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

てことは、RegisteredRouter['routeTree'] で RouteTree の型取れる。

import { RegisteredRouter } from "@tanstack/react-router";

type RouteTreeType = RegisteredRouter['routeTree'];

結論

RegisteredRouter と RoutePaths の組み合わせで取れる。

こんな感じ↓

import { RegisteredRouter, RoutePaths } from "@tanstack/react-router";

type Path = RoutePaths<RegisteredRouter['routeTree']>;

このスクラップは2024/03/05にクローズされました