Start learning free

LESSON 170 OF 173 · BACKEND: YOUR OWN API

Short Links: Redirect in TypeScript

Practice

The app stores short links, but a short link is only useful if opening it takes you to the long URL. A short link is the app's address, a slash, then the code: /1, /zz.

Any text in the path: in a route like "/:code", the part that starts with a colon is a path parameter. It takes any text between the slashes, and Express puts that text in req.params under the name after the colon. That suits codes made of digits and letters. Express's types say a parameter could also be a list of strings (for wildcard paths), so add as string when you read it, as in const name = req.params.name as string;.

Is the key there? Object.hasOwn(prices, "tea") is true when the object prices has a key "tea" that you stored. It doesn't count the names every object has built in, like toString.

Redirects: res.redirect(302, url) sends an answer with the status 302 Found and a Location header set to the URL. The answer has no page of its own: a browser that gets it opens that URL right away. For example, on another route:

app.get("/docs", (req: Request, res: Response) => {
  res.redirect(302, "https://expressjs.com/");
});

After two POST /links made the codes 1 and 2, your app must give these answers, in this order:

GET /1   →  302  Location: https://www.python.org/downloads/
GET /2   →  302  Location: https://en.wikipedia.org/wiki/URL_shortening
GET /3   →  404  {"error": "Link not found"}
GET /zz  →  404  {"error": "Link not found"}
POST /links  {"url": "https://flask.palletsprojects.com/en/stable/quickstart/"}
         →  201  {"code": "3", "url": "https://flask.palletsprojects.com/en/stable/quickstart/"}
GET /3   →  302  Location: https://flask.palletsprojects.com/en/stable/quickstart/

Your task: at the end of the file, add GET /:code. When links doesn't have the code, answer 404 with {"error": "Link not found"}; otherwise redirect to the stored URL with the status 302.


Assignment
Follow the Coding Tutorial to add the GET /:code route that sends a short link on to its long URL.


Hint
The name after req.params. is the same as the name after the colon in the path, and as string goes at the end of that line. Check for a missing code first and return the 404; only then read links[code].


STEP 1 OF 5
    Ctrl + Enter to check

    Own Links Redirect in TypeScript

    Keep going with TypeScript1,600+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free