Capitalize the first letter of a String in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 5, 2022

banner

Photo from Unsplash

Capitalize the first letter of a String in TypeScript #

To capitalize the first letter of a string in TypeScript:

  1. Use the charAt() method to get the first letter of the string.
  2. Call the toUpperCase() method on the letter.
  3. Use the slice() method to get the rest of the string.
  4. Concatenate the results.
index.ts
const str = 'hello world'; // ✅ Capitalize first letter const result1 = str.charAt(0).toUpperCase() + str.slice(1); console.log(result1); // 👉️ "Hello world" // ✅ Capitalize first letter and lowercase rest const result2 = str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); console.log(result2); // 👉️ "Hello world"

The first example in the code snippet converts the first letter of the string to uppercase and leaves the rest as is.

The second example, capitalizes the first letter and converts the rest to lowercase.

The only parameter we passed to the String.charAt method is the index of the character we want to get.

Indexes are zero-based in JavaScript (and TypeScript), meaning the index of the first character in a string is 0, and the index of the last - string.length - 1.

Then we used the String.toUpperCase() method to uppercase the character at position 0.

We used the addition (+) operator to concatenate the first character with the rest of the string.

The only parameter we passed to the String.slice method is the start index - the index of the first character to be included in the new string.

Note that the type of the result variable is string. If used on an empty string, this solution would return an empty string back and not throw an error.

index.ts
const str = ''; // ✅ Capitalize first letter const result1 = str.charAt(0).toUpperCase() + str.slice(1); console.log(result1); // 👉️ "" // ✅ Capitalize first letter lowercase rest const result2 = str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); console.log(result2); // 👉️ ""
This is because the charAt and slice methods return an empty string when accessed on an index out of bounds.

We intentionally did not use bracket [] notation to access the first character in the string, because it returns undefined when passed an index that does not exist in the string.

index.ts
const str = ''; // 👇️ const r: string const result = str[100]; console.log(result); // 👉️ undefined // ⛔️ Error: cannot read property 'toUpperCase' // of undefined result.toUpperCase();

Even though the type of the result variable is string in the example above, it stores a value of undefined, so trying to call an method on an undefined value would cause a runtime error.

TypeScript can't help us very much in this situation, especially when dealing with string values that were fetched from a remote API, so it's our responsibility to make sure the value we're calling toUpperCase on is a string.

The charAt method returns an empty string even when passed an index that doesn't exist in the string.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.