app.get("/api/users/:userID", function(req, res) {
  if (req.method === "POST") {
    res.status(20).send({
      message: "Got you, user " + req.params.userId
    });
  }
})

1. The request object.
   Here we get information on the HTTP method used (e.g GET, POST, PUT, DELETE), and additional parameters that come in. In this example userID should be mapped to a parameter userID that, well, contains the user’s ID!
2. The response or reply object.
   Here we want to prepare a proper response from the server to the client. We want to send correct status codes (method status) and send JSON output over the wire.

app.get("/api/users/:userID", function(req, res) {
  if (req.method === "POST") { /* Error 1 */
    res.status(20).send({ /* Error 2 */
      message: "Welcome, user " + req.params.userId /* Error 3 */
    });
  }
})

1. The first error is nuanced. While we tell our app that we want to listen to GET requests (hence app.get), we only do something if the request method is POST. At this particular point in our application, req.method can’t be POST. So we would never send any response, which might lead to unexpected timeouts.
2. Great that we explicitly send a status code! 20 isn’t a valid status code, though. Clients might not understand what’s happening here.
3. This is the response we want to send back. We access the parsed arguments but have a mean typo. It’s userID not userId. All our users would be greeted with "Welcome, user undefined!". Something you definitely have seen in the wild!

Basic Typing

const app = {
  get, /* post, put, delete, ... to come! */
};

function get(path: string, callback: CallbackFn) {
  // to be implemented --> not important right now
}

• req, which is of type ServerRequest
• reply which is of type ServerReply

type CallbackFn = (req: ServerRequest, reply: ServerReply) => void;

type ServerRequest = {
  method: string;
  params: Record<string, string>;
};

type ServerReply = {
  send: (obj?: any) => void;
  status: (statusCode: number) => ServerReply;
};

app.get("/api/users/:userID", function(req, res) {
  if(req.method === 2) {
//   ^^^^^^^^^^^^^^^^^ 💥 Error, type number is not assignable to string

    res.status("200").send()
//             ^^^^^ 💥 Error, type string is not assignable to number
  }
})

Smaller Sets

type Methods= "GET" | "POST" | "PUT" | "DELETE";

type ServerRequest = {
  method: Methods;
  params: Record<string, string>;
};

app.get("/api/users/:userID", function (req, res) {
  // at this point, TypeScript knows that req.method
  // can take one of four possible values
  switch (req.method) {
    case "GET":
      break;
    case "POST":
      break;
    case "DELETE":
      break;
    case "PUT":
      break;
    default:
      // here, req.method is never
      req.method;
  }
});

type StatusCode = 
  100 | 101 | 102 | 200 | 201 | 202 | 203 | 204 | 205 | 
  206 | 207 | 208 | 226 | 300 | 301 | 302 | 303 | 304 | 
  305 | 306 | 307 | 308 | 400 | 401 | 402 | 403 | 404 |
  405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 |
  414 | 415 | 416 | 417 | 418 | 420 | 422 | 423 | 424 | 
  425 | 426 | 428 | 429 | 431 | 444 | 449 | 450 | 451 | 
  499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 
  508 | 509 | 510 | 511 | 598 | 599;

type ServerReply = {
  send: (obj?: any) => void;
  status: (statusCode: StatusCode) => ServerReply;
};

app.get("/api/user/:userID", (req, res) => {
 if(req.method === "POS") {
//   ^^^^^^^^^^^^^^^^^^^ 'Methods' and '"POS"' have no overlap.
    res.status(20)
//             ^^ '20' is not assignable to parameter of type 'StatusCode'
 }
})

Enter Generics

type ServerRequest<Met extends Methods> = {
  method: Met;
  params: Record<string, string>;
};

1. ServerRequest becomes a generic type, as indicated by the angle brackets
2. We define a generic parameter called Met, which is a subset of type Methods
3. We use this generic parameter as a generic variable to define the method.

type OnlyGET = ServerRequest;
type OnlyPOST = ServerRequest;
type POSTorPUT = ServerRquest;

type CallbackFn<Met extends Methods> = (
  req: ServerRequest<Met>,
  reply: ServerReply
) => void;

function get(path: string, callback: CallbackFn<"GET">) {
  // to be implemented
}

app.get("/api/users/:userID", function (req, res) {
  req.method; // can only be get
});

const handler: CallbackFn<"PUT" | "POST"> = function(res, req) {
  res.method // can be "POST" or "PUT"
};

const handlerForAllMethods: CallbackFn<Methods> = function(res, req) {
  res.method // can be all methods
};


app.get("/api", handler);
//              ^^^^^^^ 💥 Nope, we don’t handle "GET"

app.get("/api", handlerForAllMethods); // 👍 This works

Typing Params

type ServerRequest<Met extends Methods, Par extends string = string> = {
  method: Met;
  params: Record<Par, string>;
};

// request.method = "GET"
// request.params = {
//   userID: string
// }
type WithUserID = ServerRequest

function get<Par extends string = string>(
  path: string,
  callback: CallbackFn<"GET", Par>
) {
  // to be implemented
}

type CallbackFn<Met extends Methods, Par extends string> = (
  req: ServerRequest<Met, Par>,
  reply: ServerReply
) => void;

app.get<"userID">("/api/users/:userID", function (req, res) {
  req.params.userID; // Works!!
  req.params.anythingElse; // 💥 doesn’t work!!
});

type IncludesRouteParams<Par extends string> =
  | `${string}/:${Par}`
  | `${string}/:${Par}/${string}`;

1. The first template literal starts with any string, then includes a / character followed by a : character, followed by the parameter name. This makes sure that we catch all cases where the parameter is at the end of the route string.
2. The second template literal starts with any string, followed by the same pattern of /, : and the parameter name. Then we have another / character, followed by any string. This branch of the union type makes sure we catch all cases where the parameter is somewhere within a route.

const a: IncludeRouteParams<"userID"> = "/api/user/:userID" // 👍
const a: IncludeRouteParams<"userID"> = "/api/user/:userID/orders" // 👍
const a: IncludeRouteParams<"userID"> = "/api/user/:userId" // 💥
const a: IncludeRouteParams<"userID"> = "/api/user" // 💥
const a: IncludeRouteParams<"userID"> = "/api/user/:userIDAndmore" // 💥

function get<Par extends string = string>(
  path: IncludesRouteParams<Par>,
  callback: CallbackFn<"GET", Par>
) {
  // to be implemented
}

app.get<"userID">(
  "/api/users/:userID",
  function (req, res) {
    req.params.userID; // YEAH!
  }
);

Generic bindings

1. The first issue I have is that we need to explicitly state our parameters in the generic type parameter. We have to bind Par to "userID", even though we would specify it anyway in the path argument of the function. This is not JavaScript-y!
2. This approach only handles one route parameter. The moment we add a union, e.g "userID" | "orderId" the failsafe check is satisfied with only one of those arguments being available. That’s how sets work. It can be one, or the other.

function identity<T>(inp: T) : T {
  return inp
}

const z = identity<string>("yes"); // z is of type string

const y = identity("yes") // y is of type "yes"

function get<Path extends string = string>(
  path: Path,
  callback: CallbackFn<"GET", ParseRouteParams<Path>>
) {
  // to be implemented
}

Conditional Types And Recursive Template Literal Types

type ParseRouteParams<Rte> = 
  Rte extends `${string}/:${infer P}`
  ? P
  : never;

type Params = ParseRouteParams<"/api/user/:userID"> // Params is "userID"

type NoParams = ParseRouteParams<"/api/user"> // NoParams is never --> no params!

type ParseRouteParams<Rte> = Rte extends ${string}/:${infer P}/${infer Rest}
  ? P | ParseRouteParams</${Rest}>
  : Rte extends ${string}/:${infer P}
  ? P
  : never;

1. In the first condition, we check if there is a route parameter somewhere in between the route. If so, we extract both the route parameter and everything else that comes after that. We return the newly found route parameter P in a union where we call the same generic type recursively with the Rest. For example, if we pass the route "/api/users/:userID/orders/:orderID" to ParseRouteParams, we infer "userID" into P, and "orders/:orderID" into Rest. We call the same type with Rest
2. This is where the second condition comes in. Here we check if there is a type at the end. This is the case for "orders/:orderID". We extract "orderID" and return this literal type.
3. If there is no more route parameter left, we return never.

// Params is "userID"
type Params = ParseRouteParams

app.get("/api/users/:userID/orders/:orderID", function (req, res) {
  req.params.userID; // YES!!
  req.params.orderID; // Also YES!!!
});

Static Types For Dynamic Behavior

1. We can only pass proper numeric status codes to res.status()
2. req.method is one of four possible strings, and when we use app.get, we know it only be "GET"
3. We can parse route params and make sure that we don’t have any typos inside our callback

app.get("/api/users/:userID", function(req, res) {
  if (req.method === "POST") {
//    ^^^^^^^^^^^^^^^^^^^^^
//    This condition will always return 'false'
//     since the types '"GET"' and '"POST"' have no overlap.
    res.status(20).send({
//             ^^
//             Argument of type '20' is not assignable to 
//             parameter of type 'StatusCode'
      message: "Welcome, user " + req.params.userId 
//                                           ^^^^^^
//         Property 'userId' does not exist on type 
//    '{ userID: string; }'. Did you mean 'userID'?
    });
  }
})