← Усі задачіTypeScript · Senior

Параметри маршруту з рядка

Роутери на кшталт React Router і Express описують маршрут рядком: /users/:id/posts/:postId. Напишіть тип RouteParams<Path>, що виводить з такого рядка об'єкт параметрів { id: string; postId: string }, а для маршруту без параметрів дає {}.

З ним функція buildPath(pattern, params) вимагатиме саме ті параметри, що є в маршруті, і підставлятиме їх у шлях, кодуючи значення через encodeURIComponent.

type RouteParams<Path extends string> = Record<string, string>;

function buildPath<P extends string>(pattern: P, params: RouteParams<P>): string {
  // ...
  return pattern;
}

Ctrl+Enter - запустити тести. Tab - відступ; щоб вийти з редактора клавіатурою, натисніть Esc, а потім Tab. Код зберігається в цьому браузері.

Тести (7)

Тести типів перевіряє компілятор TypeScript у режимі strict. Expect<Equal<A, B>> проходить, коли типи збігаються точно, а // @ts-expect-error - коли наступний рядок не компілюється. Перший запуск завантажує компілятор, тож триває кілька секунд.

типи

type _ = Expect<Equal<RouteParams<'/users/:id/posts/:postId'>, { id: string; postId: string }>>;

типи

type _ = Expect<Equal<RouteParams<'/about'>, {}>>;

○
типи
```
buildPath('/users/:id', { id: '42' });
```

типи

// @ts-expect-error - postId is missing
buildPath('/users/:id/posts/:postId', { id: '1' });

expect(buildPath('/users/:id/posts/:postId', { id: '7', postId: '9' })).toBe('/users/7/posts/9');

expect(buildPath('/search/:query', { query: 'a b/c' })).toBe('/search/a%20b%2Fc');

expect(buildPath('/about', {})).toBe('/about');