← Alle AufgabenTypeScript · Senior

Routenparameter aus einem String

Router wie React Router und Express beschreiben eine Route als String: /users/:id/posts/:postId. Schreib einen Typ RouteParams<Path>, der einen solchen String in ein Parameterobjekt { id: string; postId: string } verwandelt und für eine Route ohne Parameter {} ergibt.

Damit verlangt buildPath(pattern, params) genau die Parameter, die die Route hat, und setzt sie in den Pfad ein, wobei Werte mit encodeURIComponent kodiert werden.

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

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

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (7)

Typtests prüft der TypeScript-Compiler im strict-Modus. Expect<Equal<A, B>> besteht, wenn die Typen exakt gleich sind, und // @ts-expect-error, wenn die nächste Zeile nicht kompiliert. Der erste Start lädt den Compiler und dauert daher ein paar Sekunden.

Typen

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

Typen

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

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

Typen

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