Skip to main content

Module 19: Template Literal Types

Template literal types allow you to manipulate strings at the type level, creating dynamic string-based types.

1. Basic Template Literals​

type Greeting = `Hello ${string}`;

let msg1: Greeting = "Hello World";  // ✅
let msg2: Greeting = "Hello Alice";  // ✅
// let msg3: Greeting = "Hi there";  // ❌

2. Union String Combinations​

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

type ColoredSize = `${Color}-${Size}`;
// "red-small" | "red-medium" | "red-large" | 
// "green-small" | "green-medium" | "green-large" |
// "blue-small" | "blue-medium" | "blue-large"

3. String Manipulation Types​

type Uppercase<S extends string> = intrinsic;
type Lowercase<S extends string> = intrinsic;
type Capitalize<S extends string> = intrinsic;
type Uncapitalize<S extends string> = intrinsic;

type Loud = Uppercase<"hello">;  // "HELLO"
type Quiet = Lowercase<"HELLO">;  // "hello"
type Proper = Capitalize<"hello">;  // "Hello"

4. Event Handler Types​

type EventName = "click" | "focus" | "blur";
type EventHandler = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur"

type EventHandlers = {
    [K in EventHandler]: () => void;
};

5. API Endpoint Types​

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type Resource = "users" | "posts" | "comments";

type APIEndpoint = `/${Resource}`;
type APIRoute = `${HTTPMethod} ${APIEndpoint}`;
// "GET /users" | "POST /users" | etc.

6. CSS Property Types​

type CSSUnit = "px" | "em" | "rem" | "%";
type CSSValue = `${number}${CSSUnit}`;

let width: CSSValue = "100px";
let margin: CSSValue = "2rem";

7. Key Remapping with Template Literals​

type Getters<T> = {
    [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type Setters<T> = {
    [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void;
};

interface User {
    name: string;
    age: number;
}

type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number; }

8. Real-World Example: Route Types​

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type RouteParam = `/:${string}`;

type Routes = {
    "/users": { GET: User[]; POST: User };
    "/users/:id": { GET: User; PUT: User; DELETE: void };
    "/posts": { GET: Post[]; POST: Post };
};

type RouteKeys = keyof Routes;
// "/users" | "/users/:id" | "/posts"

type MethodsFor<R extends keyof Routes> = keyof Routes[R];
// GET, POST for "/users"

Key Takeaways​

✅ Template literals create string-based types
✅ Combine with unions for permutations
✅ Built-in string manipulation utilities
✅ Key remapping with Capitalize
✅ Great for API routes and event handlers

Practice Exercises​

Exercise 1: CSS Properties​

type CSSProperty = "margin" | "padding";
type Direction = "top" | "right" | "bottom" | "left";
type CSSPropertyWithDirection = `${CSSProperty}-${Direction}`;
// "margin-top", "padding-left", etc.

Exercise 2: Database Column Types​

type TableName = "users" | "posts";
type ColumnType = `${TableName}_id` | `${TableName}_name`;

Next Steps​

In Module 20, we'll dive into Advanced Generics with constraints, variance, and complex generic patterns.