URL파라미터와 페이지간의 의존성을 TypeScript를 통해 드러내기 - 제네릭타입의 활용

// 어떤 페이지
history.push('/posts?sort=created_at') // sort가 created_at이라는 정보를 전달합니다.

// "/posts" (게시글 목록 페이지)
const queryParams = getQueryParams()
if (queryParams.sort === 'created_at') {
  // do something
}

// routes.ts
const routes = {
  '게시글 목록 페이지': {
    path: '/posts' as const,
    query: {
      sort: ['created_at', 'recommend'] as const,
    },
  },
  "나의 게시글 상세 페이지": {
    path: "/users/:userId/posts/detail/:postId" as const,
    query: {
      tab: ["content", "review", "buy"] as const,
      highlight: ["true"] as const,
    }
  },
  ...
}

// 문자열을 특정 문자 기준으로 자릅니다.
type Split<S, D extends string> = S extends `${infer F}${D}${infer R}` ? [F, ...Split<R, D>] : [S]

// 튜플에서 특정 문자로 시작하는 것만 남깁니다.
type RemainStartWith<T extends string, S extends unknown> = S extends `${T}${infer R}` ? `${T}${R}` : never
type RemaintartWithColonFromTuple<T extends unknown[]> = T extends [infer K, ...infer Rest]
  ? [RemainStartWith<":", K>, ...RemaintartWithColonFromTuple<Rest>]
  : []

// 튜플에서 특정 문자로 시작하는 경우 그 문제를 제거합니다.
type RemoveStartWith<T extends string, S extends unknown> = S extends `${T}${infer R}` ? R : never
type RemoveStartWithColonFromTuple<T extends unknown[]> = T extends [infer K, ...infer Rest]
  ? [RemoveStartWith<":", K>, ...RemoveStartWithColonFromTuple<Rest>]
  : []

// 튜플을 Union 타입으로 만듭니다.
type TupleToUnion<A extends string[]> = A[number]

type MY_URL = '/users/:userId/posts/detail/:postId'
type R1 = Split<MY_URL, '/'> // ["users", ":userId", "posts", "detail", ":postId"]
type R2 = RemaintartWithColonFromTuple<R1> // [never, ":userId", never, never, ":postId"]
type R3 = RemoveStartWithColonFromTuple<R2> // [never, "userId", never, never, "postId"]
type R4 = TupleToUnion<R3> // "userId" | "postId"

type ExtractPathParams<P extends string> = TupleToUnion<
  RemoveStartWithColonFromTuple<RemaintartWithColonFromTuple<Split<P, '/'>>>
>
type R5 = ExtractPathParams<MY_URL> // "userId" | "postId"

type Obj<O extends Record<keyof O, any>> = {
  [K in keyof O]: O[K]
   ^^^^^^^^^^^^
// 객체로 들어오는 O 타입의 key들로 K를 만들겠다는 의미입니다.
}

type ExtractQueryParams<Q extends Record<keyof Q, any>> = {
  [K in keyof Q]?: TupleToUnion<Q[K]>
}

type PageName = keyof typeof routes // routes 객체의 key들이 페이지의 이름입니다.
type PathParams<P extends PageName> = Record<
  ExtractPathParams<typeof routes[P]['path']>,
  string
>
type QueryParams<P extends PageName> = ExtractQueryParams<
  typeof routes[P]['query']
>

const typeSafePush = <P extends PageName>(
  pageName: P,
  params: {
    pathParams: PathParams<P>
    queryParams: QueryParams<P>
  }
) => {
  const route = routes[pageName]
  const filledPath = fillPathWithParams(route.path, params.pathParams)
  const queryString = stringifyQuery(params.queryParams)

  history.push(`${filledPath}?${queryString}`)
}

typeSafePush('나의 게시글 상세 페이지', {
  pathParams: { userId: '1111', postId: '222' },
  queryParams: { tab: 'review', highlight: 'true' },
})