Lesson 1
String Manipulation in TypeScript: Reversing Words Within a String
Introduction

Hello, and welcome! Are you ready to elevate your string manipulation skills in TypeScript? Today, we'll delve into a task that bolsters your comprehension of strings and enhances your creativity. The task involves splitting a string into words and then reversing each word as if reflected in a mirror. Does that sound interesting? Let's get started with TypeScript's enhanced type safety!

Task Statement and Description

You're tasked with considering a string filled with words and writing a TypeScript function that accepts this string. The function should reverse the character order of each word and form a new string consisting of these reversed words.

Here's what you need to keep in mind:

  • The input string will contain between 1 and 100 words.
  • Each word in the string is a sequence of characters separated by whitespace.
  • The characters can range from a to z, A to Z, 0 to 9, or even an underscore _.
  • The provided string will neither start nor end with a space, and double spaces won't be present either.
  • After reversing the words, your program should output a single string with the reversed words preserving their original order.

Example

Consider the input string "Hello neat typescript_lovers_123".

The function works as follows:

  • Hello becomes olleH
  • neat becomes taen
  • typescript_lovers_123 becomes 321_srevol_tpircsyt

Afterward, it forms a single string with these reversed words, producing "olleH taen 321_srevol_tpircsyt".

Therefore, if you call reverseWords("Hello neat typescript_lovers_123"), the function should return "olleH taen 321_srevol_tpircsyt".

Let's begin breaking this down!

Step-by-Step Solution Building: Step 1

Our first task is to separate the words in the sentence. In TypeScript, the split() method of the String object allows us to achieve this easily. The delimiter you'll use in the split() method is a single space " ". Here is a sample code to illustrate this:

TypeScript
1let inputStr: string = "Hello neat typescript_lovers_123"; 2let words: string[] = inputStr.split(" "); 3 4// Now the array 'words' holds all the words of the string 5console.log(words); // Output: [ 'Hello', 'neat', 'typescript_lovers_123' ]

Note that " " as the delimiter ensures that the string is split at each space, effectively separating the words.

Step-by-Step Solution Building: Step 2

Next, we need to reverse each word separated in the previous step. In TypeScript, we can use array methods to achieve this, along with type annotations to ensure type safety. The map() method is particularly useful here as it creates a new array populated with the results of calling a provided function on every element in the calling array. By applying map(), we can transform each word individually.

In our case, each word is:

  1. Split into an array of characters using split('').
  2. Reversed using the reverse() method.
  3. Joined back into a string using the join('') method, which concatenates the reversed characters without any separators.

Here's the updated code illustrating this:

TypeScript
1let reversedWords: string[] = words.map((word: string): string => { 2 let reversedWord: string = word.split('').reverse().join(''); 3 console.log(reversedWord); // Prints each reversed word 4 return reversedWord; 5}); 6 7// 'reversedWords' now contains the reversed words

Output:

Plain text
1olleH 2taen 3321_srevol_tpircsepyt
Step-by-Step Solution Building: Step 3

Finally, we need to consolidate these reversed words into a single string, separated by spaces. We can achieve this using the join() method in TypeScript. Here's how we do that:

TypeScript
1let finalStr: string = reversedWords.join(' ');

The join(' ') method will concatenate all the words in the array, separating them with spaces.

Final Solution

It remains for us to combine the code from the steps together in a function reverseWords and call it to test. We'll incorporate type annotations in the function signature to specify parameter and return types.

TypeScript
1function reverseWords(inputStr: string): string { 2 let words: string[] = inputStr.split(" "); 3 let reversedWords: string[] = words.map((word: string): string => word.split('').reverse().join('')); 4 return reversedWords.join(' '); 5} 6 7// Call the function 8console.log(reverseWords("Hello neat typescript_lovers_123")); // prints: 'olleH taen 321_srevol_tpircsepyt'
Lesson Summary

Well done! By completing this lesson, you've sharpened your proficiency in manipulating strings in TypeScript. You've improved especially in reversing the order of characters in a word and gained experience with TypeScript's type safety. TypeScript's strong typing system allows you to catch errors earlier in the development process, which boosts your confidence and efficiency. Remember, mastering these skills requires frequent practice, so continue exploring related problems and practicing what you’ve learned. Enjoy the journey of learning with TypeScript!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.