Template Literal Types

Question 1

Q: What are Template Literal Types and how do you create them?

Answer 1

A: Template Literal Types allow you to create new string literal types by concatenating existing ones using the same syntax as JavaScript template literals.

type World = "world";
type Greeting = `hello ${World}`;  // type is "hello world"

// With unions
type Status = "success" | "error";
type ResponseType = `API_${Status}`;  // type is "API_success" | "API_error"

Question 2

Q: How do Template Literal Types work with unions, and what happens when multiple unions are used?

Answer 2

A: When unions are used in template literals, they create all possible combinations of the union members.

type EmailTypes = "welcome" | "goodbye";
type Langs = "en" | "fr";

type EmailIDs = `${EmailTypes}_${Langs}`;
// Result type is:
// "welcome_en" | "welcome_fr" | "goodbye_en" | "goodbye_fr"

// Multiple unions get cross-multiplied
type Formats = "text" | "html";
type FullIDs = `${EmailTypes}_${Langs}_${Formats}`;
// Creates all combinations

Question 3

Q: How can you use Template Literal Types with generics for type-safe string manipulations?

Answer 3

A: Template Literal Types can be combined with generics to create powerful type-safe string manipulations.

// Type-safe event handling
type PropEventSource<Type> = {
    on<Key extends string & keyof Type>(
        eventName: `${Key}Changed`,
        callback: (newValue: Type[Key]) => void
    ): void;
};

// Usage example
interface User {
    name: string;
    age: number;
}

const user: User & PropEventSource<User> = {} as any;
user.on("nameChanged", (newName: string) => {});  // OK
user.on("ageChanged", (newAge: number) => {});    // OK
user.on("locationChanged", () => {});             // Error!

Question 4

Q: What built-in string manipulation types does TypeScript provide for template literals?

Answer 4

A: TypeScript includes four intrinsic types for string manipulation: Uppercase, Lowercase, Capitalize, and Uncapitalize.

// Uppercase
type Shouting = Uppercase<"hello">;  // type is "HELLO"

// Lowercase
type Quiet = Lowercase<"HELLO">;     // type is "hello"

// Capitalize
type Greeting = Capitalize<"hello">; // type is "Hello"

// Uncapitalize
type casual = Uncapitalize<"Hello">; // type is "hello"

// Practical example
type EventName<T extends string> = `${Capitalize<T>}Event`;
type MouseEvent = EventName<"click">;  // type is "ClickEvent"

Question 5

Q: What are some practical applications of Template Literal Types?

Answer 5

A: Template Literal Types are often used for type-safe string operations, API routes, and event handling systems.

// API Route Definition
type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIRoute<Path extends string> = `/${Path}`;
type Endpoint = `${HTTPMethod} ${APIRoute<string>}`;

// Valid endpoints
const validEndpoint: Endpoint = "GET /users";
// const invalidEndpoint: Endpoint = "PATCH /users"; // Error!

// CSS Properties
type CSSValue = number | string;
type CSSProperties<T extends string> = {
    [K in T as `set${Capitalize<K>}`]: (value: CSSValue) => void;
};

interface StyleProps {
    color: string;
    margin: number;
}

type StyleSetters = CSSProperties<keyof StyleProps>;
// Results in:
// {
//   setColor: (value: string | number) => void;
//   setMargin: (value: string | number) => void;
// }