TypeScript String Manipulation Utility Types Explained
Learn how Uppercase, Lowercase, Capitalize, and Uncapitalize transform string literal types. Examples for event handlers, API key naming, and template literals.
String Types
Detailed Explanation
String Manipulation Types
TypeScript 4.1 introduced four intrinsic string manipulation types that transform string literal types at the type level.
Uppercase
type Shouted = Uppercase<"hello">;
// Result: "HELLO"
type EnvKeys = Uppercase<"apiKey" | "dbHost">;
// Result: "APIKEY" | "DBHOST"
Lowercase
type Lower = Lowercase<"HTTP" | "HTTPS">;
// Result: "http" | "https"
Capitalize
type Cap = Capitalize<"hello">;
// Result: "Hello"
Uncapitalize
type UnCap = Uncapitalize<"Hello">;
// Result: "hello"
Practical Pattern: Event Handler Names
type EventName = "click" | "focus" | "blur" | "change";
type HandlerName = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur" | "onChange"
type Handlers = Record<HandlerName, () => void>;
// {
// onClick: () => void;
// onFocus: () => void;
// onBlur: () => void;
// onChange: () => void;
// }
Practical Pattern: Getter/Setter Names
type PropName = "name" | "age" | "email";
type Getters = {
[K in PropName as `get${Capitalize<K>}`]: () => string;
};
// { getName: () => string; getAge: () => string; getEmail: () => string }
type Setters = {
[K in PropName as `set${Capitalize<K>}`]: (value: string) => void;
};
Practical Pattern: API Endpoint Typing
type Resource = "user" | "post" | "comment";
type ApiEndpoints = {
[R in Resource as `/api/${Lowercase<R>}s`]: {
get: () => Promise<unknown>;
post: (data: unknown) => Promise<unknown>;
};
};
Use Case
Use string manipulation types when building template literal types for event handler names, getter/setter patterns, API endpoint typing, CSS class name generation, or any pattern where string transformations at the type level improve type safety.