Suggest an edit

Improve this article

Refine the answer for “Utility types for strings”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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

1. They work **only with string literal types**
(otherwise the result is just `string`):

```javascript
  type A = Uppercase<string>; // string
  ```
2. They do not affect **runtime** - these are purely **type-level** transformations.
3. 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 | <code>type ID<T> = `id-${T}`;  <br>type A = ID<"user">; // "id-user"</code> |
| Splitting via `extends` | Format checking | <code>type IsPrefixed<S> = S extends `id-${string}` ? true : false;</code> |
| Combining types | Dynamically creating string variants | <code>type Status = "loading" \| "success";  <br>type Msg = `${Uppercase&lt;Status&gt;}_STATE`; // "LOADING_STATE" \| "SUCCESS_STATE"</code> |

---

## 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"` |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts541 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.