Utility types for strings

TypeScriptMiddle~2 min read

The general idea

Since version 4.1+, TypeScript supports template literal types and string manipulation types - the ability to transform strings right at the type level.

The main case-conversion utilities

Type	What it does	Example
`Uppercase<S>`	Converts every character of string `S` to uppercase	`"hello"` → `"HELLO"`
`Lowercase<S>`	Converts every character of string `S` to lowercase	`"Hello"` → `"hello"`
`Capitalize<S>`	Makes the first character of the string uppercase, the rest unchanged	`"hello"` → `"Hello"`
`Uncapitalize<S>`	Makes the first character of the string lowercase, the rest unchanged	`"Hello"` → `"hello"`

Code examples

javascript

type A = Uppercase<"hello world">;     // "HELLO WORLD"
type B = Lowercase<"HELLO WORLD">;     // "hello world"
type C = Capitalize<"typescript">;     // "Typescript"
type D = Uncapitalize<"ReactApp">;     // "reactApp"

Using them with template literal types

These utilities are especially powerful combined with string interpolation in types:

javascript

type EventName<T extends string> = `on${Capitalize<T>}`;

type ClickEvent = EventName<"click">;  // "onClick"
type ChangeEvent = EventName<"change">; // "onChange"

Using them to auto-generate object keys

javascript

type Keys = "name" | "email" | "phone";
type Getters = `get${Capitalize<Keys>}`;
// "getName" | "getEmail" | "getPhone"

An example with mixed utilities

You can chain several utilities in a row:

javascript

type Format<S extends string> = Uppercase<Capitalize<S>>;

type R = Format<"react">; // "REACT"

Applying them to keyof

These utilities are very often applied to interface keys:

javascript

interface User {
  firstName: string;
  lastName: string;
}

type UpperKeys = Uppercase<keyof User>;
// "FIRSTNAME" | "LASTNAME"

type Getters = `get${Capitalize<keyof User>}`;
// "getFirstName" | "getLastName"

Features and limitations

They work only with string literal types (otherwise the result is just string):

javascript

type A = Uppercase<string>; // string

They do not affect runtime - these are purely type-level transformations.
They can be combined with Conditional Types to filter strings.

Other useful types for strings (with template literals)

Type / technique	Purpose	Example
Interpolation	Concatenating strings at the type level	`type ID = id-${T}; type A = ID<"user">; // "id-user"`
Splitting via `extends`	Format checking	`type IsPrefixed = S extends id-${string} ? true : false;`
Combining types	Dynamically creating string variants	`type Status = "loading" \| "success"; type Msg = ${Uppercase<Status>}_STATE; // "LOADING_STATE" \| "SUCCESS_STATE"`

A practical example: auto-generating event names

javascript

type Events = "click" | "submit" | "hover";

type Handlers = {
  [E in Events as `on${Capitalize<E>}`]: (e: E) => void;
};

/*
{
  onClick: (e: "click") => void;
  onSubmit: (e: "submit") => void;
  onHover: (e: "hover") => void;
}
*/

Summary

Utility	Description	Example result
`Uppercase<S>`	Converts string `S` to uppercase	`"abc"` → `"ABC"`
`Lowercase<S>`	Converts string `S` to lowercase	`"ABC"` → `"abc"`
`Capitalize<S>`	Makes the first character of a string uppercase	`"react"` → `"React"`
`Uncapitalize<S>`	Makes the first character of a string lowercase	`"React"` → `"react"`

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.