Capitalize<S>
Converts the first character of a string literal type to uppercase while leaving the rest unchanged.
Definition
type Capitalize<S extends string> = intrinsic;Examples
type A = Capitalize<"hello">;
// "Hello"
type B = Capitalize<"firstName">;
// "FirstName"
type C = Capitalize<"already Capitalized">;
// "Already Capitalized"type DOMEvent = "click" | "focus" | "blur" | "change" | "submit";
type HandlerName = `on${Capitalize<DOMEvent>}`;
// "onClick" | "onFocus" | "onBlur" | "onChange" | "onSubmit"
type Handlers = {
[K in HandlerName]?: (event: Event) => void;
};
const handlers: Handlers = {
onClick: (e) => console.log("clicked"),
onSubmit: (e) => console.log("submitted"),
};type Fields = "name" | "age" | "email";
type Getters = {
[K in Fields as `get${Capitalize<K>}`]: () => string;
};
type Setters = {
[K in Fields as `set${Capitalize<K>}`]: (value: string) => void;
};
// Getters: { getName: () => string; getAge: () => string; getEmail: () => string }
// Setters: { setName: (v: string) => void; setAge: (v: string) => void; ... }Common Use Cases
- 1Generating event handler prop names (onClick, onChange)
- 2Creating getter/setter method names from field names
- 3Building PascalCase type names from camelCase
- 4Template literal types that follow naming conventions
- 5React prop type generation patterns
Understanding Capitalize<S>
Capitalize<S> converts the first character of a string literal type to uppercase while preserving the rest of the string. It is an intrinsic type, meaning the transformation is handled directly by the TypeScript compiler.
Capitalize is arguably the most practically useful of the four intrinsic string types, because it directly supports common JavaScript naming conventions. In JavaScript, event handlers follow the pattern onEvent (onClick, onChange), getters follow getField, and setters follow setField—all requiring capitalization of the base name.
The canonical use case is generating React-style event handler prop names. Given a union of DOM events like "click" | "focus" | "blur", the template literal type `on${Capitalize<DOMEvent>}` produces "onClick" | "onFocus" | "onBlur". This enables type-safe component APIs without manually listing every handler name.
Capitalize also powers key remapping in mapped types. TypeScript 4.1 introduced the as clause in mapped types, allowing you to transform keys. Combined with Capitalize, you can create types like { [K in Fields as `get${Capitalize<K>}`]: () => T[K] } to automatically generate getter methods from an object's fields.
The getter/setter pattern is common in code generation, ORM libraries, and state management tools. Instead of manually defining getters and setters for each field, a single mapped type with Capitalize can generate the entire interface.
Capitalize pairs naturally with Uncapitalize for bidirectional conversion. If you need to convert from handler names back to event names (from "onClick" to "click"), Uncapitalize with template literal inference can reverse the transformation.
Related Types
Uncapitalize<S>Converts the first character of a string literal type to lowercase while leaving the rest unchanged.
Uppercase<S>Converts each character in a string literal type to its uppercase equivalent using intrinsic compiler support.
Lowercase<S>Converts each character in a string literal type to its lowercase equivalent using intrinsic compiler support.
Template Literal TypesTemplate literal types combine string literal types with embedded expressions to create powerful string pattern types.
More String Types
Explore TypeScript Types
Browse our complete reference of 30 TypeScript utility types with definitions, examples, and explanations.