Template Literal Types

Typed API Routes

A route type can require strings to follow the path shape used by an application.

route type Template literal types can describe valid URL path patterns without accepting every string.

Typed API Routes

version
routes.ts
Replay: real traced execution (multi-file project)
type ApiVersion = "v1" | "v2";
type Resource = "users" | "orders";
type ApiRoute = `/api/${ApiVersion}/${Resource}`;

function describeRoute(route: ApiRoute): string {
    const parts: string[] = route.split("/");
    return `${parts[2]} ${parts[3]}`;
}

const version: ApiVersion = "v1";
const resource: Resource = "users";
const route: ApiRoute = `/api/${version}/${resource}`;

console.log(describeRoute(route));

type ApiVersion = "v1" | "v2";
type Resource = "users" | "orders";
type ApiRoute = `/api/${ApiVersion}/${Resource}`;

function describeRoute(route: ApiRoute): string {
    const parts: string[] = route.split("/");
    return `${parts[2]} ${parts[3]}`;
}

const version: ApiVersion = "v2";
const resource: Resource = "users";
const route: ApiRoute = `/api/${version}/${resource}`;

console.log(describeRoute(route));

  1. version ← v1, resource ← users, route ← /api/v1/users

    7    return `${parts[2]} ${parts[3]}`;8}910const version→ v1: ApiVersion = "v1";  //@version="v2"11const resource→ users: Resource = "users";12const route→ /api/v1/users: ApiRoute = `/api/${versionv1}/${resourceusers}`;1314console.log(describeRoute(route/api/v1/users));

  2. parts ← ,api,v1,users

    2type Resource = "users" | "orders";3type ApiRoute = `/api/${ApiVersion}/${Resource}`;45function describeRoute(route/api/v1/users: ApiRoute): string {6    const parts→ ,api,v1,users: string[] = route/api/v1/users.split("/");7    return `${parts[2]v1} ${parts[3]users}`;8}

  3. console.log(describeRoute(route));

    11const resource: Resource = "users";12const route: ApiRoute = `/api/${version}/${resource}`;1314console.log(describeRoute(route/api/v1/users));
    outputv1 users

  1. version ← v2, resource ← users, route ← /api/v2/users

    7    return `${parts[2]} ${parts[3]}`;8}910const version→ v2: ApiVersion = "v2";11const resource→ users: Resource = "users";12const route→ /api/v2/users: ApiRoute = `/api/${versionv2}/${resourceusers}`;1314console.log(describeRoute(route/api/v2/users));

  2. parts ← ,api,v2,users

    2type Resource = "users" | "orders";3type ApiRoute = `/api/${ApiVersion}/${Resource}`;45function describeRoute(route/api/v2/users: ApiRoute): string {6    const parts→ ,api,v2,users: string[] = route/api/v2/users.split("/");7    return `${parts[2]v2} ${parts[3]users}`;8}

  3. console.log(describeRoute(route));

    11const resource: Resource = "users";12const route: ApiRoute = `/api/${version}/${resource}`;1314console.log(describeRoute(route/api/v2/users));
    outputv2 users