문제: 아래 Routes에서 DynamicRoutes를 엘레강스하게 추출하려면?

import { Equal, Expect } from '../../helper';

type Routes = '/users' | '/users/:id' | '/products' | '/products/:id';

type DynamicRoutes = unknown;

type tests = [Expect<Equal<DynamicRoutes, '/users/:id' | '/products/:id'>>];

내 처음 답은 DynamicRoutes를 아래처럼 바꾸는 것이다.

type DynamicRoutes = Exclude<Routes, '/users' | '/products'>;
type DynamicRoutes = Extract<Routes, '/users/:id' | '/products/:id'>;

이때 Exclude를 사용해서 NOT인 것을 빼는게 아니라, Extract로 실제 포함되는 것을 명시적으로 추가하는 편이 더 명확해서 좋겠다. 그리고 보통 서비스 확장을 해나가다보면 정적경로를 더 많이 추가하게 되는 편이다. 그러므로 동적경로를 기준으로 파생타입을 만드는 것이 수정 횟수가 덜 들것이라는 추가적인 장점도 있을 것이다.

하지만 Extract 유틸함수를 위처럼 사용한다해도, 여전히 Routes에 새로운 동적 경로가 추가될 때마다 DynamicRoutes가 관리되어야 한다는 점에서 번거롭다.

더 우아하게 경로를 관리하는 방법

위 문제에서 더욱 우아하게 동적 경로를 관리하는 방법은 바로 아래처럼 템플릿 리터럴을 조합하는 방식이다.

type Dynamic = Extract<Routes, `${string}/:${string}`>

템플릿 리터럴과 Extract, Exclude 등의 유틸함수와 조합하면 이렇게 복잡한 문자열도 추출해낼 수 있다.

type Routes = '/users' | '/users/:id' | '/p/:slug';

type Dynamic = Extract<Routes, `${string}/:${string}`>; // '/users/:id' | '/p/:slug'
type Static = Exclude<Routes, `${string}/:${string}`>; // '/users'

결론적으로 동적경로가 Routes에 추가되든 정적경로가 추가되든, 파생 타입인 Static과 Dynamic에는 제대로 추가된 타입들이 반영되게 된다.

`${string}/:${string}`은 'products/asthetic/:id'는 대응 못하는게 아닌가?

나는 위 해결책이 기발하긴 한데 `${string}/:${string}`이면 결국 '/users/:id/edit'이라던가 '/channel/sbs/:id' 등의 복잡한 동적경로는 못 잡아낼 줄 알았다.

그런데 반전이 있는데, 템플릿 리터럴 타입은 정규식처럼 작동하며, 일부만 대응되어도 모두 true로 반환하게 된다. 그러므로 /:id가 포함된 모든 문자열이 대응되어 동적경로가 정확하게 반영될 수 있게된다.

// 1) 콜론 파라미터가 "있기만 하면" 전부 수집
type AnyDynamic = Extract<Routes, `${string}/:${string}`>;
// 결과: '/users/:id' | '/users/:id/edit' | '/a/b/:id' | '/:id' | '/products/:pid/reviews/:rid'

// 2) 파라미터 이름이 "id"인 경우만 수집
type OnlyIdDynamic = Extract<Routes, `${string}/:id${string}`>;
// 결과: '/users/:id' | '/users/:id/edit' | '/a/b/:id' | '/:id'

또한 더욱이 신기하게도 /:id 자체도 `${string}/:${string}`에 포함된다. 앞에 적어도 하나의 정적 path가 있어야 대응되는게 아닌가? 라고 생각했는데 string이 ""일 가능성도 있으니 `/:id`도 충분히 포함된다는 것이다.