← Wszystkie zadaniaTypeScript · Senior

Parametry trasy z napisu

Routery takie jak React Router i Express opisują trasę napisem: /users/:id/posts/:postId. Napisz typ RouteParams<Path>, który z takiego napisu wyprowadza obiekt parametrów { id: string; postId: string }, a dla trasy bez parametrów daje {}.

Dzięki niemu buildPath(pattern, params) będzie wymagać dokładnie tych parametrów, które ma trasa, i wstawi je do ścieżki, kodując wartości przez encodeURIComponent.

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

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

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (7)

Testy typów sprawdza kompilator TypeScriptu w trybie strict. Expect<Equal<A, B>> przechodzi, gdy typy są dokładnie takie same, a // @ts-expect-error, gdy następna linia się nie kompiluje. Pierwsze uruchomienie pobiera kompilator, więc trwa kilka sekund.

typy

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

typy

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

○
typy
```
buildPath('/users/:id', { id: '42' });
```

typy

// @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');