TypeScript Template Literal Types

Template literal types allow for complex string manipulation within the type system, leveraging the same syntax as JavaScript template strings.

Basic Syntax and Expansion

A template literal type expands into all possible combinations when provided with unions.

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

type Lang = "en" | "ja";
type Locale = `${Lang}_id`; // "en_id" | "ja_id"

TypeScript can infer portions of a string inside a template literal.

type PropEventSource<T> = {
  on<K extends string & keyof T>(eventName: `${K}Changed`, callback: (v: T[K]) => void): void;
};

Built-in helpers for common string operations: