TypeScript Tutorial: Building a Simple Web-Based Word Counter

Written by

learnmodernjavascript

in

In the digital age, where content reigns supreme, understanding how to effectively manage and analyze text is a crucial skill. Whether you’re a writer, a marketer, or a student, knowing the word count of your text is often the first step in assessing its impact and suitability for your needs. Manually counting words can be tedious and prone to errors. This is where a web-based word counter comes in handy. It’s a simple, yet powerful tool that can significantly improve your productivity and text analysis capabilities. In this tutorial, we will explore how to build a simple, yet functional, web-based word counter using TypeScript, a superset of JavaScript that adds static typing, making your code more robust and easier to maintain.

Why TypeScript?

TypeScript offers several advantages over plain JavaScript, especially for larger projects. Here’s why we’re choosing TypeScript for this tutorial:

  • Static Typing: TypeScript allows you to define the types of your variables, function parameters, and return values. This helps catch errors early in the development process, reducing debugging time.
  • Improved Code Readability: Types make your code easier to understand and maintain. They act as self-documenting elements, clarifying the intent of your code.
  • Enhanced Tooling: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, which significantly speeds up development.
  • Object-Oriented Programming (OOP) Features: TypeScript supports OOP principles like classes, interfaces, and inheritance, making it easier to structure and organize your code.

Project Setup

Let’s get started by setting up our project. We’ll use a simple HTML file, a TypeScript file, and a way to compile the TypeScript code into JavaScript. Here’s how:

  1. Create a Project Directory: Create a new directory for your project, e.g., “word-counter-app”.
  2. Initialize npm: Open your terminal, navigate to your project directory, and run npm init -y. This creates a package.json file, which manages your project dependencies.
  3. Install TypeScript: Install TypeScript as a development dependency using the following command: npm install --save-dev typescript
  4. Create Configuration File: Create a tsconfig.json file in your project directory. This file configures the TypeScript compiler. You can generate a basic one using: npx tsc --init. You can customize this file to suit your project’s needs. A basic configuration might look like this:
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration specifies that the compiler should target ES5 JavaScript, use the CommonJS module system, output the compiled files to a “dist” directory, and look for source files in the “src” directory. It also enables strict type checking.

  1. Create HTML File: Create an index.html file in your project directory. This will be the structure for your app.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word Counter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Word Counter</h1>
    <textarea id="text-input" rows="10" cols="50" placeholder="Enter your text here..."></textarea>
    <p>Word Count: <span id="word-count">0</span></p>
  </div>
  <script src="dist/app.js"></script>
</body>
</html>

This HTML provides the basic structure: a text area for input, and a paragraph to display the word count. It also links to a stylesheet (style.css) for styling and includes the compiled JavaScript file (app.js) at the end of the body.

  1. Create CSS File: Create a style.css file in your project directory. This file is for styling the app.
body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
  1. Create TypeScript File: Create a src/app.ts file in your project directory. This will contain the TypeScript code for our word counter.

Writing the TypeScript Code

Now, let’s write the TypeScript code to implement the word counter. Open src/app.ts and add the following code:


// Get the text input element and word count display element from the DOM
const textInput = document.getElementById('text-input') as HTMLTextAreaElement;
const wordCountDisplay = document.getElementById('word-count') as HTMLSpanElement;

// Function to count words
function countWords(text: string): number {
  // Remove leading/trailing whitespace and split the text into an array of words
  const words = text.trim().split(/s+/);
  // Return the number of words
  return words.length;
}

// Function to update the word count display
function updateWordCount(): void {
  // Get the text from the text input
  const text = textInput.value;
  // Count the words
  const count = countWords(text);
  // Update the word count display
  wordCountDisplay.textContent = count.toString();
}

// Add an event listener to the text input to update the word count on input
textInput.addEventListener('input', updateWordCount);

// Initial word count display on page load
updateWordCount();

Let’s break down this code:

  • Selecting DOM Elements: We start by getting references to the HTML elements we need: the text input area and the span element where we’ll display the word count. We use the document.getElementById() method for this. The as HTMLTextAreaElement and as HTMLSpanElement parts are type assertions. They tell TypeScript that we know these elements are of the specified types, allowing us to access their properties and methods safely.
  • countWords Function: This function takes a string as input and returns the number of words. It first trims any leading or trailing whitespace using the trim() method. Then, it splits the string into an array of words using the split() method with a regular expression (/s+/) that matches one or more whitespace characters. Finally, it returns the length of the resulting array, which represents the word count.
  • updateWordCount Function: This function is responsible for updating the word count displayed on the page. It retrieves the text from the text input, calls the countWords() function to calculate the word count, and then updates the textContent of the word count display element.
  • Event Listener: We add an event listener to the text input element. This listener listens for the “input” event, which fires whenever the content of the text input changes. When the event fires, the updateWordCount() function is called to update the word count.
  • Initial Call: We call updateWordCount() once when the page loads to display the initial word count (which will be 0 if the text area is empty).

Compiling and Running the App

With the code in place, let’s compile the TypeScript code and run the app:

  1. Compile TypeScript: In your terminal, run the following command from your project directory: npx tsc. This will compile the app.ts file and create a app.js file in the dist directory (as specified in your tsconfig.json).
  2. Open in Browser: Open the index.html file in your web browser. You should see the text area and the word count display.
  3. Test the App: Type text into the text area. The word count should update automatically as you type.

Advanced Features and Enhancements

While the basic word counter is functional, we can enhance it with more features. Here are some ideas:

  • Real-time Updates: The current implementation updates the word count as the user types.
  • Character Count: Add a feature to display the character count along with the word count.
  • Paragraph Count: Implement the functionality to count the number of paragraphs.
  • Error Handling: Handle potential errors, such as invalid input or unexpected behavior.
  • More Styling: Improve the user interface with CSS.
  • User Interface (UI) Improvements: Add a clear button to clear the text area.

Let’s implement the character count and paragraph count features to illustrate how you can extend the functionality. Modify the src/app.ts file as follows:


// Get the text input element and word count display element from the DOM
const textInput = document.getElementById('text-input') as HTMLTextAreaElement;
const wordCountDisplay = document.getElementById('word-count') as HTMLSpanElement;
const characterCountDisplay = document.getElementById('character-count') as HTMLSpanElement;
const paragraphCountDisplay = document.getElementById('paragraph-count') as HTMLSpanElement;

// Function to count words
function countWords(text: string): number {
  const words = text.trim().split(/s+/);
  return words.length;
}

// Function to count characters
function countCharacters(text: string): number {
  return text.length;
}

// Function to count paragraphs
function countParagraphs(text: string): number {
  // Split the text by one or more newline characters to identify paragraphs
  const paragraphs = text.split(/n+/).filter(paragraph => paragraph.trim() !== '');
  return paragraphs.length;
}

// Function to update the word count display
function updateWordCount(): void {
  const text = textInput.value;
  const wordCount = countWords(text);
  const characterCount = countCharacters(text);
  const paragraphCount = countParagraphs(text);

  wordCountDisplay.textContent = wordCount.toString();
  if (characterCountDisplay) {
    characterCountDisplay.textContent = characterCount.toString();
  }
  if (paragraphCountDisplay) {
    paragraphCountDisplay.textContent = paragraphCount.toString();
  }
}

textInput.addEventListener('input', updateWordCount);

updateWordCount();

In this enhanced code:

  • We added references to new DOM elements with ids character-count and paragraph-count.
  • We added the characterCountDisplay and paragraphCountDisplay to the updateWordCount function, to update the values.
  • We added a countCharacters function to count the number of characters in the text.
  • We added a countParagraphs function to count the number of paragraphs. The split(/n+/) splits the text based on newline characters (n). The filter(paragraph => paragraph.trim() !== '') part removes any empty strings that might result from multiple consecutive newlines.
  • We updated the updateWordCount function to calculate character and paragraph counts and update the corresponding display elements.

To make the new functionality work, we need to modify the index.html to include the new display elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Word Counter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Word Counter</h1>
    <textarea id="text-input" rows="10" cols="50" placeholder="Enter your text here..."></textarea>
    <p>Word Count: <span id="word-count">0</span></p>
    <p>Character Count: <span id="character-count">0</span></p>
    <p>Paragraph Count: <span id="paragraph-count">0</span></p>
  </div>
  <script src="dist/app.js"></script>
</body>
</html>

We’ve added two new <p> elements with the ids character-count and paragraph-count to display the counts. Also, we need to update the CSS file to make the new elements appear in the page. Here is an example to display the new elements in the page:


body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 80%; /* Adjust width as needed */
  max-width: 600px; /* Adjust max-width as needed */
}

textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

p {
  margin-bottom: 5px;
}

After saving the HTML and TypeScript files, recompile the TypeScript code using npx tsc and refresh the page in your browser. You should now see the character and paragraph counts updating in real-time as you type.

Common Mistakes and How to Fix Them

When building a web-based word counter, you might encounter some common issues. Here are some of them and how to fix them:

  • Incorrect Type Assertions: Forgetting to use type assertions (e.g., as HTMLTextAreaElement) can lead to type errors and unexpected behavior. Always ensure that you correctly assert the types of your DOM elements.
  • Whitespace Issues: Not handling whitespace correctly can lead to inaccurate word counts. Make sure to trim leading and trailing whitespace and handle multiple spaces between words. The regular expression /s+/ is critical for this.
  • Event Listener Issues: If the event listener is not set up correctly, the word count may not update. Double-check that you’ve attached the event listener to the correct element and that the event is “input”.
  • Compilation Errors: If you encounter compilation errors, carefully review the error messages provided by the TypeScript compiler. These messages often point to the exact line of code where the error is located. Common mistakes include incorrect syntax, type mismatches, and missing semicolons.
  • Incorrect File Paths: Ensure that the file paths in your HTML file (e.g., for the CSS and JavaScript files) are correct.
  • Missing or Incorrect Dependencies: If you encounter issues related to module resolution or compilation, double-check that you have installed all necessary dependencies (e.g., TypeScript) using npm.

Key Takeaways

  • TypeScript for Robustness: Using TypeScript enhances code quality by adding static typing, improving readability, and enabling better tooling support.
  • DOM Manipulation: Understanding how to select and manipulate DOM elements is essential for building interactive web applications.
  • Event Handling: Event listeners are crucial for responding to user interactions, such as text input.
  • Modular Design: Breaking down your code into functions (e.g., countWords, updateWordCount) makes it more organized and easier to maintain.
  • Real-world application: This project shows you how to build a practical tool that you can use every day.

FAQ

  1. Can I use this word counter in a production environment?
    Yes, you can. However, for a production environment, you might want to add features like error handling, more robust input validation, and more comprehensive styling to improve the user experience.
  2. How can I deploy this word counter to the web?
    You can deploy this word counter to the web by hosting the HTML, CSS, and JavaScript files on a web server or using a platform like Netlify or GitHub Pages.
  3. Can I add more features to this word counter?
    Absolutely! You can extend the functionality by adding features like character count, paragraph count, a clear button, and more advanced text analysis features.
  4. What are the benefits of using TypeScript for this project?
    TypeScript helps catch errors early, makes your code easier to read and maintain, and provides better tooling support, such as autocompletion and refactoring.

Building a web-based word counter in TypeScript is an excellent way to learn the fundamentals of web development and TypeScript. By following the steps outlined in this tutorial, you can create a useful tool that helps you analyze text efficiently. Remember to experiment with different features, explore the possibilities, and continue learning to enhance your skills. The ability to create tools like this demonstrates a solid understanding of fundamental programming principles and the practical application of TypeScript in a real-world scenario. This project serves as a starting point, and the skills you gain can be applied to many other web development projects. Embrace the learning process, experiment with the code, and enjoy the journey of building your own web applications.

More posts