TypeScript中如何实现类型安全的路由系统

type RouteConfig<T extends string> = {
  path: T;
  component: React.ComponentType<any>;
  children?: RouteConfig<any>[];
  params?: Record<string, string>; // 可选参数类型
  query?: Record<string, string>; // 查询参数类型
};

// 从路径字符串中提取参数类型
type PathParams<T extends string> = T extends `${infer P}/${infer R}`
  ? P extends `:${infer Param}`
    ? { [K in Param]: string } & PathParams<R>
    : PathParams<R>
  : {};

type P1 = PathParams<'users/:id'>; // { id: string }
type P2 = PathParams<'users/:id/posts/:postId'>; // { id: string; postId: string }

type Route<T extends string> = {
  path: T;
  component: React.ComponentType<any>;
  children?: Route<T>[];
  params?: PathParams<T>; // 参数类型
  query?: Record<string, string>; // 查询参数类型
};

const routes = {
  home: {
    path: '/',
    component: Home,
  },
  users: {
    path: '/users',
    component: Users,
    children: [
      {
        path: '/users/:id',
        component: UserDetail,
        params: { id: 'string' },
      },
      {
        path: '/users/:id/posts/:postId',
        component: PostDetail,
        params: { id: 'string', postId: 'string' },
      },
    ],
  },
} as const;

type NavigateOptions<T extends string> = {
  to: T;
  query?: Record<string, string>;
};

function useNavigate() {
  const navigate = useNavigate(); // 假设使用 React Router v6

  return <T extends string>(options: NavigateOptions<T>) => {
    const { to, query } = options;
    const search = query ? new URLSearchParams(query).toString() : '';
    navigate(`${to}${search ? `?${search}` : ''}`);
  };
}

function useLocation<T extends string>() {
  const location = useLocation();
  const path = location.pathname as T;

  // 提取路径参数
  const params = path.split('/').reduce((acc, segment, index, arr) => {
    if (segment.startsWith(':')) {
      const key = segment.slice(1);
      const value = arr[index + 1];
      return { ...acc, [key]: value };
    }
    return acc;
  }, {} as Record<string, string>);

  // 查询参数
  const searchParams = new URLSearchParams(location.search);
  const query = {} as Record<string, string>;
  searchParams.forEach((value, key) => {
    query[key] = value;
  });

  return { path, params, query };
}

function UserDetail() {
  const { params, query } = useLocation<'/users/:id'>();

  const navigate = useNavigate();

  return (
    <div>
      User: {params.id}
      <button onClick={() => navigate({ to: '/users', query: { page: '2' } })}>
        Go to Users
      </button>
    </div>
  );
}

type LinkProps<T extends string> = {
  to: T;
  query?: Record<string, string>;
  children: React.ReactNode;
};

function Link<T extends string>({ to, query, children }: LinkProps<T>) {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate({ to, query })}>
      {children}
    </button>
  );
}

function UserDetail() {
  const { id } = useParams<{ id: string }>();
  const [searchParams] = useSearchParams();

  const postId = searchParams.get('postId');

  return <div>User {id} Post {postId}</div>;
}

import { z } from 'zod';

const UserQuerySchema = z.object({
  page: z.string().optional(),
  limit: z.string().optional(),
});

type UserQuery = z.infer<typeof UserQuerySchema>;

const query = UserQuerySchema.parse(Object.fromEntries(searchParams));

src/
  routes/
    index.ts
    user.ts
  components/
    Home.tsx
    UserDetail.tsx
  hooks/
    useNavigate.ts
    useLocation.ts