String manipulation types (Uppercase, Lowercase) in Typescript - Mini Project: Build & Apply

String manipulation types (Uppercase, Lowercase)

📖 Scenario: You are creating a simple program to help a user format their name correctly. Sometimes names are entered in all uppercase or lowercase letters, but you want to show the name in a consistent style.

🎯 Goal: Build a TypeScript program that takes a name string, converts it to uppercase and lowercase, and then displays both versions.

📋 What You'll Learn

Create a string variable with a specific name value

Create a boolean variable to decide which case to show

Use string methods to convert the name to uppercase or lowercase

Print the converted name based on the boolean variable

💡 Why This Matters

🌍 Real World

Formatting names and text is common in apps like contact lists, forms, and messaging to keep data consistent and readable.

💼 Career

Understanding string manipulation is essential for frontend and backend developers to handle user input, display data properly, and prepare text for storage or communication.

1

Create the initial name string

Create a string variable called userName and set it to the value "Alice".

Typescript

// Your code here

Hint

Use const to create a variable and assign the exact string "Alice".

2

Add a boolean to choose uppercase or lowercase

Create a boolean variable called showUpperCase and set it to true.

Typescript

const userName: string = "Alice";
// Your code here

Hint

Use const to create a boolean variable with the value true.

3

Convert the name based on the boolean

Create a variable called formattedName that uses a conditional expression to set it to userName.toUpperCase() if showUpperCase is true, otherwise userName.toLowerCase().

Typescript

const userName: string = "Alice";
const showUpperCase: boolean = true;
// Your code here

Hint

Use the ternary operator condition ? valueIfTrue : valueIfFalse to choose the case.

4

Print the formatted name

Write a console.log statement to print the value of formattedName.

Typescript

const userName: string = "Alice";
const showUpperCase: boolean = true;
const formattedName: string = showUpperCase ? userName.toUpperCase() : userName.toLowerCase();
// Your code here

Hint

Use console.log(formattedName); to display the result.

Practice

1. Which TypeScript string method converts all characters in a string to uppercase?

easy

A. convertCase()

B. toLowerCase()

C. toTitleCase()

D. toUpperCase()

Solution

1. Step 1: Understand string case methods

   TypeScript strings have built-in methods to change letter cases, including toUpperCase() and toLowerCase().

2. Step 2: Identify method for uppercase

   The method toUpperCase() changes all letters to uppercase, while toLowerCase() changes to lowercase.

3. Final Answer:

   toUpperCase() -> Option D

4. Quick Check:

   Uppercase method = toUpperCase() [OK]

Hint: Uppercase method always has 'Upper' in its name [OK]

Common Mistakes:

• Confusing toUpperCase() with toLowerCase()
• Thinking toTitleCase() exists in TypeScript
• Assuming convertCase() is a valid method

2. Which of the following is the correct syntax to convert a string variable name to lowercase in TypeScript?

easy

A. name.toLowerCase()

B. toLowerCase(name)

C. name.lowercase()

D. lowerCase(name)

Solution

1. Step 1: Recall method call syntax on strings

   In TypeScript, string methods are called on the string variable using dot notation.

2. Step 2: Identify correct method name and usage

   The method to convert to lowercase is toLowerCase(), called as name.toLowerCase(). Other options are invalid syntax or incorrect method names.

3. Final Answer:

   name.toLowerCase() -> Option A

4. Quick Check:

   Lowercase method called on variable = name.toLowerCase() [OK]

Hint: String methods use dot notation like variable.method() [OK]

Common Mistakes:

• Using function style like toLowerCase(name)
• Using incorrect method names like lowercase()
• Missing parentheses after method name

3. What will be the output of the following TypeScript code?

const text = "Hello World";
console.log(text.toUpperCase());

medium

A. "hello world"

B. SyntaxError

C. "HELLO WORLD"

D. "Hello World"

Solution

1. Step 1: Understand the input string and method

   The string is "Hello World" and the method toUpperCase() converts all letters to uppercase.

2. Step 2: Apply toUpperCase() to the string

   Applying toUpperCase() changes "Hello World" to "HELLO WORLD".

3. Final Answer:

   "HELLO WORLD" -> Option C

4. Quick Check:

   toUpperCase() output = "HELLO WORLD" [OK]

Hint: toUpperCase() makes all letters big exactly [OK]

Common Mistakes:

• Expecting lowercase output instead
• Thinking original string is unchanged in output
• Confusing method name causing syntax error

4. Identify the error in this TypeScript code snippet:

let greeting = "Hi There";
console.log(greeting.toLowercase());

medium

A. Missing semicolon after string declaration

B. toLowercase() is not a valid method; correct is toLowerCase()

C. Variable greeting should be const, not let

D. Console.log should be console.Log

Solution

1. Step 1: Check method name spelling

   The method to convert string to lowercase is toLowerCase() with capital 'C'. The code uses toLowercase() with lowercase 'c', which is invalid.

2. Step 2: Verify other syntax elements

   Semicolon is optional in TypeScript, let is valid for variable, and console.log is case-sensitive and correct as written.

3. Final Answer:

   toLowercase() is not a valid method; correct is toLowerCase() -> Option B

4. Quick Check:

   Method name case matters: toLowerCase() correct [OK]

Hint: Method names are case-sensitive; watch capital letters [OK]

Common Mistakes:

• Ignoring case sensitivity in method names
• Thinking semicolon is mandatory error
• Confusing console.log capitalization

5. You have an array of strings: const fruits = ["Apple", "BANANA", "Cherry"];
How do you create a new array where all fruit names are lowercase using TypeScript?

hard

A. fruits.map(fruit => fruit.toLowerCase())

B. fruits.toLowerCase()

C. fruits.forEach(fruit => fruit.toLowerCase())

D. fruits.map(fruit => toLowerCase(fruit))

Solution

1. Step 1: Understand array transformation

   To change each string in an array, use map() to create a new array with transformed values.

2. Step 2: Apply toLowerCase() inside map callback

   Inside map, call fruit.toLowerCase() to convert each string to lowercase. This returns a new array with all lowercase fruits.

3. Final Answer:

   fruits.map(fruit => fruit.toLowerCase()) -> Option A

4. Quick Check:

   Use map() with toLowerCase() for array lowercase [OK]

Hint: Use map() with toLowerCase() to transform arrays [OK]

Common Mistakes:

• Calling toLowerCase() directly on array
• Using forEach which returns void, not new array
• Trying to call toLowerCase() as a standalone function