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.

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.

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<StringType>: Converts all characters to uppercase.
• Lowercase<StringType>: Converts all characters to lowercase.
• Capitalize<StringType>: Converts the first character to uppercase.
• Uncapitalize<StringType>: Converts the first character to lowercase.

type Action = "update" | "delete";

type ActionConstant = `ACTION_${Uppercase<Action>}`;
// Type: "ACTION_UPDATE" | "ACTION_DELETE"

type HandlerMethod = `on${Capitalize<Action>}`;
// 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.

type ExtractDomain<T extends string> = T extends `${string}@${infer Domain}` ? Domain : never;

type DomainType = ExtractDomain<"[e-mail]">; 
// Type: "example.com"

Multiple infer declarations can be used sequentially to deconstruct complex string literal types into individual type variables.

type SplitTuple<T extends string> = 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.

type EventName = `on${string}`;

const validEvent: EventName = "onClick";    // OK
const invalidEvent: EventName = "click";    // Error: Type '"click"' is not assignable to type '`on${string}`'

Master TypeScript with Deep Grasping Methodology!

Learn More