Template Literal Types no TypeScript 2026

// Template literal type básico
type ApiRoute = `/api/${string}`;

const rota1: ApiRoute = "/api/users";     // OK
const rota2: ApiRoute = "/api/posts/123"; // OK
// const rota3: ApiRoute = "/users";      // Error!

// Combinando unions: produto cartesiano automático
type Cor = "red" | "green" | "blue";
type Tamanho = "sm" | "md" | "lg";

type ClasseCSS = `${Cor}-${Tamanho}`;
// Resultado: "red-sm" | "red-md" | "red-lg" |
//            "green-sm" | "green-md" | "green-lg" |
//            "blue-sm" | "blue-md" | "blue-lg"

const classe: ClasseCSS = "red-lg";  // OK
// const errada: ClasseCSS = "red-xl"; // Error!

// Uppercase: tudo maiúsculo
type A = Uppercase<"hello">;     // "HELLO"
type B = Uppercase<"world">;     // "WORLD"

// Lowercase: tudo minúsculo
type C = Lowercase<"HELLO">;     // "hello"

// Capitalize: primeira letra maiúscula
type D = Capitalize<"name">;     // "Name"
type E = Capitalize<"email">;    // "Email"

// Uncapitalize: primeira letra minúscula
type F = Uncapitalize<"Name">;   // "name"

// Combinando com template literals
type Campo = "name" | "email" | "age";

type Getter = `get${Capitalize<Campo>}`;
// "getName" | "getEmail" | "getAge"

type Setter = `set${Capitalize<Campo>}`;
// "setName" | "setEmail" | "setAge"

type EnvVar = `APP_${Uppercase<Campo>}`;
// "APP_NAME" | "APP_EMAIL" | "APP_AGE"

// Gerando nomes de handler a partir de campos
type FormField = "name" | "email" | "password";

type OnChange = `on${Capitalize<FormField>}Change`;
// "onNameChange" | "onEmailChange" | "onPasswordChange"

type OnBlur = `on${Capitalize<FormField>}Blur`;
// "onNameBlur" | "onEmailBlur" | "onPasswordBlur"

// Tipando um sistema de eventos completo
type EventName = "click" | "hover" | "focus" | "blur";
type ElementId = "submit-btn" | "cancel-btn" | "search-input";

type EventKey = `${ElementId}:${EventName}`;
// "submit-btn:click" | "submit-btn:hover" | ... (16 combinações)

const handlers: Record<EventKey, () => void> = {
  "submit-btn:click": () => console.log("submit"),
  "submit-btn:hover": () => console.log("hover"),
  // ... TypeScript exige todas as 16 chaves
};

// Gerando getters e setters tipados
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;
  active: boolean;
}

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

type UserSetters = Setters<User>;
// {
//   setName: (value: string) => void;
//   setAge: (value: number) => void;
//   setActive: (value: boolean) => void;
// }

// Combinando tudo
type UserAccessors = Getters<User> & Setters<User>;

// Tipando rotas REST
type Recurso = "users" | "posts" | "comments";
type Metodo = "GET" | "POST" | "PUT" | "DELETE";

type RotaBase = `/api/v1/${Recurso}`;
// "/api/v1/users" | "/api/v1/posts" | "/api/v1/comments"

type RotaComId = `/api/v1/${Recurso}/${number}`;
// "/api/v1/users/${number}" | ...

// Extraindo partes de uma rota com infer
type ExtrairRecurso<T> = T extends `/api/v1/${infer R}/${number}`
  ? R
  : T extends `/api/v1/${infer R}`
    ? R
    : never;

type R1 = ExtrairRecurso<"/api/v1/users">;     // "users"
type R2 = ExtrairRecurso<"/api/v1/posts/42">;  // "posts"