Capitalize<StringType>

INFO

The Capitalize<StringType> utility type is available starting from TypeScript version 4.1. For more information see in TypeScript Handbook, Release Note

Overview

The Capitalize<StringType> utility type capitalizes the first letter of a string literal type while keeping the remaining characters unchanged.

Syntax

type Capitalize<S extends string> = S extends `${inter F}${inter Rest}` ? `${Uppercase<F>}${Rest}` : S;

• StringType (S): The string that you want to convert the first character to an uppercase equivalent.

Examples

Example #1

type LowercaseGreeting = 'hello, world';
type Greeting = Capitalize<LowercaseGreeting>; // 'Hello, world'

type CamelCase = 'camelCase';
type PascalCase = Capitalize<CamelCase>; // 'CamelCase'

Example #2

type FormEventNames = 'submit' | 'reset' | 'change' | 'input' | 'focus' | 'blur' | 'invalid';
type CapitalizedFormEventNames = Capitalize<FormEventNames>; // 'Submit' | 'Reset' | 'Change' | 'Input' | 'Focus' | 'Blur' | 'Invalid'
type FormHandlerNames = `on${CapitalizedFormEventNames}`; // 'onSubmit' | 'onReset' | 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onInvalid'
type FormHandlers = {
  [FormHandlerName in FormHandlerNames]: (event: Event) => void;
};

Example #3

interface UserStoreState {
  id: number;
  name: string;
  age: number;
}

// Type to convert a property name to a setter function name.
// For example, given 'name', it converts it to 'setName'.
type ConvertToSetter<S extends string> = `set${Capitalize<S>}`;

// Create a type for store setters based on the state.
// For each property in StoreState, generate a setter function.
type StoreSetters<StoreState> = {
  [K in keyof StoreState as ConvertToSetter<Extract<K, string>>]: (value: StoreState[K]) => void;
};

// Combine the state and its setter into a single type.
type UserStore = UserStoreState & StoreSetters<UserStoreState>;

// Resulting type:
// type UserStore = {
//   id: number;
//   name: string;
//   age: number;
//   setId: (value: number) => void;
//   setName: (value: string) => void;
//   setAge: (value: number) => void;
// }