> ## Documentation Index > Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt > Use this file to discover all available pages before exploring further. # TypeScript Template Literal Type Template literal types are string types constructed by interpolating other types within backticks (`` ` ``). They resolve to exact string literal types at compile time and, when combined with union types, automatically generate a Cartesian product of all possible string combinations. ## Basic Interpolation The syntax mirrors JavaScript template literals but operates strictly at the type level. You can interpolate `string`, `number`, `bigint`, `boolean`, `null`, and `undefined`. ```typescript theme={"dark"} type Prefix = "app"; type Version = 1; type Identifier = `${Prefix}_v${Version}`; // Type: "app_v1" ``` ## Union Expansion (Cartesian Product) When a union type is interpolated within a template literal type, TypeScript distributes the operation across the union members. If multiple unions are interpolated, TypeScript computes the cross-multiplication (Cartesian product) of all sets. ```typescript theme={"dark"} type Size = "small" | "large"; type Color = "red" | "blue"; type ProductID = `${Size}-${Color}`; // Type: "small-red" | "small-blue" | "large-red" | "large-blue" ``` ## Intrinsic String Manipulation Types TypeScript provides four intrinsic utility types implemented directly in the compiler to transform string literal types within template literals: * `Uppercase`: Converts all characters to uppercase. * `Lowercase`: Converts all characters to lowercase. * `Capitalize`: Converts the first character to uppercase. * `Uncapitalize`: Converts the first character to lowercase. ```typescript theme={"dark"} type Action = "update" | "delete"; type ActionConstant = `ACTION_${Uppercase}`; // Type: "ACTION_UPDATE" | "ACTION_DELETE" type HandlerMethod = `on${Capitalize}`; // Type: "onUpdate" | "onDelete" ``` ## Pattern Matching with `infer` Template literal types can be used within conditional types to perform pattern matching and substring extraction using the `infer` keyword. TypeScript infers the narrowest possible string literal type that satisfies the structural pattern. ```typescript theme={"dark"} type ExtractDomain = T extends `${string}@${infer Domain}` ? Domain : never; type DomainType = ExtractDomain<"admin@example.com">; // Type: "example.com" ``` Multiple `infer` declarations can be used sequentially to deconstruct complex string literal types into individual type variables. ```typescript theme={"dark"} type SplitTuple = T extends `${infer Left}_${infer Right}` ? [Left, Right] : never; type Parts = SplitTuple<"foo_bar">; // Type: ["foo", "bar"] ``` ## Broad String Interpolation If a generic `string` or `number` type is interpolated rather than a specific literal, the resulting template literal type represents an infinite set of strings matching that pattern. ```typescript theme={"dark"} type EventName = `on${string}`; const validEvent: EventName = "onClick"; // OK const invalidEvent: EventName = "click"; // Error: Type '"click"' is not assignable to type '`on${string}`' ```

Tired of Poor TypeScript Skills? Fix That With Deep Grasping! Learn More