Capitalize and Uncapitalize types in Typescript - Step-by-Step Execution

Concept Flow - Capitalize and Uncapitalize types

Start with string type

↓

Apply Capitalize<T>

↓

First letter uppercase

↓

Resulting type

↓

Start with string type

↓

Apply Uncapitalize<T>

↓

First letter lowercase

↓

Resulting type

Capitalize<T> makes the first letter uppercase; Uncapitalize<T> makes the first letter lowercase of a string type.

Execution Sample

Typescript

type Cap = Capitalize<'hello'>;
type Uncap = Uncapitalize<'WORLD'>;

This code creates two types: one with first letter capitalized, one with first letter uncapitalized.

Execution Table

Step	Type Operation	Input Type	Result Type
1	Capitalize<'hello'>	'hello'	'Hello'
2	Uncapitalize<'WORLD'>	'WORLD'	'wORLD'
3	Capitalize<'typescript'>	'typescript'	'Typescript'
4	Uncapitalize<'TypeScript'>	'TypeScript'	'typeScript'
5	Capitalize<'123abc'>	'123abc'	'123abc' (unchanged, no letter)
6	Uncapitalize<'ABC123'>	'ABC123'	'aBC123'
Exit	No more operations	-	-

💡 All examples processed, showing how first letter changes or stays if not a letter.

Variable Tracker

Type Alias	Initial Input	After Operation	Final Result
Cap	'hello'	Capitalize applied	'Hello'
Uncap	'WORLD'	Uncapitalize applied	'wORLD'

Key Moments - 2 Insights

Why does Capitalize<'123abc'> not change the string?

Because Capitalize only changes the first letter if it is a letter; digits stay the same as shown in execution_table row 5.

Does Uncapitalize change all letters or just the first one?

Only the first letter is changed to lowercase, the rest remain unchanged, as seen in execution_table rows 2 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the result of Capitalize<'hello'> at step 1?

A 'hello'

B 'HELLO'

C 'Hello'

D 'hELLO'

💡 Hint

Check the Result Type column at step 1 in the execution_table.

At which step does Uncapitalize change 'WORLD' to 'wORLD'?

A Step 2

B Step 5

C Step 3

D Step 4

💡 Hint

Look at the Type Operation and Result Type columns in execution_table.

If you apply Capitalize to 'typescript', what will be the result?

A 'typescript'

B 'Typescript'

C 'TYPESCRIPT'

D 'tYPESCRIPT'

💡 Hint

Refer to step 3 in execution_table for Capitalize<'typescript'>.

Concept Snapshot

Capitalize<T>: changes first letter of string type T to uppercase.
Uncapitalize<T>: changes first letter of string type T to lowercase.
Only affects first character if it is a letter.
Useful for transforming string literal types.
Syntax: type NewType = Capitalize<'string'> or Uncapitalize<'STRING'>.

Full Transcript

This visual execution shows how TypeScript's Capitalize and Uncapitalize types work. Capitalize takes a string type and makes its first letter uppercase, while Uncapitalize makes the first letter lowercase. For example, Capitalize<'hello'> becomes 'Hello', and Uncapitalize<'WORLD'> becomes 'wORLD'. If the first character is not a letter, like a digit, Capitalize does not change it. Only the first letter is affected; the rest of the string stays the same. This helps when you want to transform string literal types in your code. The execution table traces each step with input and output types, and the variable tracker shows how type aliases change. The quiz tests understanding of these transformations.

Practice

1. What does the Capitalize<T> utility type do in TypeScript?

easy

A. It makes the first letter of a string type lowercase.

B. It makes the entire string type uppercase.

C. It reverses the string type.

D. It makes the first letter of a string type uppercase.

Solution

1. Step 1: Understand the purpose of Capitalize<T>

   The Capitalize utility type changes only the first letter of a string type to uppercase.

2. Step 2: Compare with other options

   Other options describe different transformations like full uppercase or lowercase, which are not what Capitalize does.

3. Final Answer:

   It makes the first letter of a string type uppercase. -> Option D

4. Quick Check:

   Capitalize = first letter uppercase [OK]

Hint: Capitalize only changes the first letter to uppercase [OK]

Common Mistakes:

• Thinking it changes the whole string to uppercase
• Confusing Capitalize with Uncapitalize
• Assuming it reverses the string

2. Which of the following is the correct syntax to uncapitalize a string type T in TypeScript?

easy

A. Uncapitalize<T>

B. Uncapitalize[T]

C. uncapitalize<T>

D. Uncapitalize(T)

Solution

1. Step 1: Recall TypeScript generic syntax

   Generic utility types use angle brackets <> to specify the type parameter, like Uncapitalize<T>.

2. Step 2: Check case sensitivity and brackets

   TypeScript is case sensitive and uses angle brackets, so 'Uncapitalize<T>' is correct, while parentheses or square brackets are invalid here.

3. Final Answer:

   Uncapitalize<T> -> Option A

4. Quick Check:

   Generic types use <> brackets [OK]

Hint: Use angle brackets for generic types like Uncapitalize<T> [OK]

Common Mistakes:

• Using parentheses instead of angle brackets
• Writing utility type names in lowercase
• Using square brackets instead of angle brackets

3. What is the resulting type of Capitalize<'hello world'> in TypeScript?

medium

A. 'Hello world'

B. 'hello world'

C. 'HELLO WORLD'

D. 'hELLO WORLD'

Solution

1. Step 1: Apply Capitalize to the string literal

   Capitalize changes only the first letter to uppercase, so 'hello world' becomes 'Hello world'.

2. Step 2: Confirm the rest of the string remains unchanged

   Only the first character changes; the rest stays lowercase as in the original string.

3. Final Answer:

   'Hello world' -> Option A

4. Quick Check:

   Capitalize<'hello world'> = 'Hello world' [OK]

Hint: Only first letter changes to uppercase, rest stays same [OK]

Common Mistakes:

• Making the entire string uppercase
• Not changing any letter
• Changing only the first letter to lowercase

4. Given the code snippet:

type T = uncapitalize<'HelloWorld'>;

What is the error in this code?

medium

A. The string literal should be lowercase.

B. The utility type name should be capitalized as Uncapitalize.

C. The angle brackets should be replaced with parentheses.

D. There is no error; the code is correct.

Solution

1. Step 1: Check utility type name casing

   TypeScript utility types like Uncapitalize must start with uppercase letters; 'uncapitalize' is invalid.

2. Step 2: Verify other syntax elements

   The string literal and angle brackets are correct; only the utility type name casing is wrong.

3. Final Answer:

   The utility type name should be capitalized as Uncapitalize. -> Option B

4. Quick Check:

   Utility types start with uppercase letters [OK]

Hint: Utility types always start with uppercase letters [OK]

Common Mistakes:

• Using lowercase for utility type names
• Changing brackets to parentheses
• Thinking string literal case matters here

5. How can you create a new type that capitalizes the first letter of each word in a union type 'apple' | 'banana' | 'cherry' using TypeScript's Capitalize utility?

hard

A. type Fruits = Capitalize<'apple banana cherry'>;

B. type Fruits = Capitalize<apple | banana | cherry>;

C. type Fruits = Capitalize<'apple'> | Capitalize<'banana'> | Capitalize<'cherry'>;

D. type Fruits = Uncapitalize<'apple' | 'banana' | 'cherry'>;

Solution

1. Step 1: Understand Capitalize on union types

   Capitalizing a union type like 'apple' | 'banana' | 'cherry' directly does not capitalize each word separately.

2. Step 2: Capitalize each string literal individually

   Applying Capitalize to each string separately and then unioning them ensures each word's first letter is capitalized.

3. Final Answer:

   type Fruits = Capitalize<'apple'> | Capitalize<'banana'> | Capitalize<'cherry'>; -> Option C

4. Quick Check:

   Capitalize each union member separately [OK]

Hint: Capitalize each union member separately for correct result [OK]

Common Mistakes:

• Applying Capitalize to the whole union at once
• Using Uncapitalize instead of Capitalize
• Trying to capitalize a single string with all words