TypeScript Tutorial: Building a Simple Web Application for a Word Counter

Written by

learnmodernjavascript

in

In the digital age, where content is king, understanding and manipulating text efficiently is a valuable skill. Imagine you’re a writer, a student, or even a professional tasked with creating content. You might need to adhere to word count limits, analyze the frequency of specific words, or simply gauge the length of your text. Manually counting words can be tedious and prone to errors. This is where a word counter web application comes in handy. In this tutorial, we will explore how to build a simple, yet functional, word counter application using TypeScript, a superset of JavaScript that adds static typing to the language, making our code more robust and easier to maintain.

Why TypeScript?

Before diving into the code, let’s briefly touch upon why TypeScript is an excellent choice for this project. TypeScript provides several benefits, including:

  • Static Typing: TypeScript allows us to define the types of variables, function parameters, and return values. This helps catch errors early in the development process and improves code readability.
  • Improved Code Maintainability: With static typing, it’s easier to understand and refactor code, especially in larger projects.
  • Enhanced Developer Experience: TypeScript offers better autocompletion, refactoring tools, and error checking in most code editors, making development more efficient.
  • Modern JavaScript Features: TypeScript supports the latest JavaScript features, allowing us to write modern, concise code.

By using TypeScript, we can build a more reliable and maintainable word counter application.

Setting Up the Development Environment

To get started, we need to set up our development environment. We’ll need Node.js and npm (Node Package Manager) installed. If you don’t have them, you can download them from the official Node.js website. Once Node.js and npm are installed, we can proceed with the following steps:

  1. Create a Project Directory: Create a new directory for our project, for example, “word-counter-app”.
  2. Initialize a Node.js Project: Open your terminal, navigate to the project directory, and run the following command to initialize a Node.js project:
npm init -y

This command creates a `package.json` file, which manages our project’s dependencies.

  1. Install TypeScript: Install TypeScript and the TypeScript compiler globally or locally. For a local installation, run:
npm install typescript --save-dev

This command installs TypeScript as a development dependency.

  1. Initialize a TypeScript Configuration File: To configure TypeScript, run the following command in your terminal:
npx tsc --init

This creates a `tsconfig.json` file in your project directory. This file contains various options for the TypeScript compiler. We can customize this file later to suit our project’s needs.

  1. Create the Source Files: Create a directory named “src” in your project directory. Inside the “src” directory, create a file named “index.ts”. This is where we’ll write our TypeScript code for the word counter application.

With our development environment set up, we are now ready to write the code for our word counter application.

Writing the TypeScript Code

Let’s start by outlining the core functionality of our word counter application:

  • Get Input: We need a way to get the text input from the user. This will typically be a text area element in our HTML.
  • Count Words: We’ll write a function to count the number of words in the input text.
  • Display Results: We’ll display the word count to the user, typically in a designated area of our HTML.

Here’s the TypeScript code for our word counter application, starting with the `index.ts` file:


// index.ts

// Get references to the HTML elements
const textArea = 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 string into words
  const words = text.trim().split(/s+/);
  return words.length;
}

// Function to update the word count
function updateWordCount(): void {
  if (textArea && wordCountDisplay) {
    const text = textArea.value;
    const wordCount = countWords(text);
    wordCountDisplay.textContent = wordCount.toString();
  }
}

// Add an event listener to the text area to update the count on input
if (textArea) {
  textArea.addEventListener('input', updateWordCount);
}

// Initial word count on page load (in case there's text already)
updateWordCount();

Let’s break down this code:

  • Element References: We get references to the HTML elements we’ll be interacting with: a text area for input and a span element to display the word count. We use type assertions (`as HTMLTextAreaElement` and `as HTMLSpanElement`) to tell TypeScript the expected types of these elements.
  • `countWords` Function: This function takes a string as input, removes leading and trailing whitespace using `trim()`, and splits the string into an array of words using `split(/s+/);`. The regular expression `s+` matches one or more whitespace characters. Finally, it returns the number of words in the array.
  • `updateWordCount` Function: This function is responsible for updating the word count. It gets the text from the text area, calls the `countWords` function to count the words, and then updates the `textContent` of the word count display element.
  • Event Listener: We add an event listener to the text area. The ‘input’ event is triggered whenever the text in the text area changes. When this event occurs, the `updateWordCount` function is called to update the word count.
  • Initial Count: We call `updateWordCount()` initially to display the word count if there’s any text already present in the text area when the page loads.

Creating the HTML Structure

Now, let’s create the HTML file (`index.html`) for our word counter application. This file will contain the text area for the user to input text and a display area for the word count.


<!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>
  <style>
    body {
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      background-color: #f4f4f4;
    }

    .container {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 80%;
      max-width: 600px;
    }

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

    #word-count-display {
      font-weight: bold;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Word Counter</h1>
    <textarea id="text-input" rows="10" placeholder="Enter your text here..."></textarea>
    <p>Word Count: <span id="word-count-display">0</span></p>
  </div>
  <script src="./dist/index.js"></script>
</body>
</html>

Here’s a breakdown of the HTML code:

  • Basic Structure: We have a basic HTML structure with a `<head>` and a `<body>`.
  • Title and Styles: The `<title>` tag sets the title of the page. We also include some basic CSS styles to make the application visually appealing.
  • Container: We have a `div` element with the class “container” to hold the main content of our application.
  • Heading: An `<h1>` heading for the title “Word Counter”.
  • Text Area: A `<textarea>` element with the id “text-input” where the user will enter their text. We also set the `rows` attribute to control the number of visible text lines, and the `placeholder` attribute to provide a hint to the user.
  • Word Count Display: A paragraph (`<p>`) that displays the word count. We use a `<span>` element with the id “word-count-display” to hold the word count, which will be updated by our TypeScript code.
  • Script Tag: Finally, we include a `<script>` tag that links to our compiled JavaScript file (`./dist/index.js`). This is where our TypeScript code will be executed.

Compiling and Running the Application

Now that we have our TypeScript code and HTML file, we need to compile the TypeScript code into JavaScript and then run the application.

  1. Compile the TypeScript code: Open your terminal, navigate to your project directory, and run the following command to compile the TypeScript code:
tsc

This command uses the TypeScript compiler (`tsc`) to compile the `index.ts` file into a `index.js` file in a `dist` folder, as defined in the `tsconfig.json` file. The `tsconfig.json` file is important for setting compiler options, like the output directory.

If you haven’t already, modify your `tsconfig.json` to include the following settings:


{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*"
  ]
}

These settings configure the compiler to output JavaScript files in the `dist` directory, enable ES module interop, and enable strict type checking. The `include` setting specifies that all `.ts` files in the `src` directory should be included in the compilation.

  1. Open the HTML file in your browser: Open the `index.html` file in your web browser. You should see the word counter application with a text area and a word count display.
  2. Test the application: Type text into the text area. As you type, the word count should update in real-time.

If everything is set up correctly, you should now have a working word counter application.

Advanced Features and Improvements

Our simple word counter application is functional, but we can enhance it with some advanced features and improvements. Here are some ideas:

  • Character Count: Add a feature to display the character count along with the word count.
  • Real-time Updates: Improve the real-time updates by debouncing or throttling the input event to prevent excessive updates.
  • Error Handling: Implement error handling to gracefully handle unexpected input or errors.
  • Word Frequency Analysis: Add a feature to analyze the frequency of words in the text.
  • User Interface Enhancements: Improve the user interface with better styling and layout.
  • Accessibility: Ensure the application is accessible to users with disabilities by using semantic HTML and ARIA attributes.
  • Dark Mode: Implement a dark mode for better user experience in low-light environments.

Let’s implement the character count feature as an example. We’ll add a new element to display the character count and modify our TypeScript code to update it.

First, we need to modify the HTML file (`index.html`) to include a new element to display the character count. Add the following line within the “container” `div`:


<p>Character Count: <span id="character-count-display">0</span></p>

Next, we need to modify the TypeScript file (`index.ts`) to count the characters and update the character count display. Add the following lines to your `index.ts` file:


// Get reference to the character count display
const characterCountDisplay = document.getElementById('character-count-display') as HTMLSpanElement;

// Function to update the character count
function updateCharacterCount(): void {
  if (textArea && characterCountDisplay) {
    const text = textArea.value;
    characterCountDisplay.textContent = text.length.toString();
  }
}

// Modify the updateWordCount function to also update the character count.
function updateWordCount(): void {
  if (textArea && wordCountDisplay) {
    const text = textArea.value;
    const wordCount = countWords(text);
    wordCountDisplay.textContent = wordCount.toString();
    updateCharacterCount(); // Call the character count update function.
  }
}

// Call updateCharacterCount() on initial load
updateCharacterCount();

In this code, we:

  • Get a reference to the new `character-count-display` element.
  • Create a new `updateCharacterCount` function to update the character count display.
  • Modify the `updateWordCount` function to also call the `updateCharacterCount` function.
  • Call `updateCharacterCount()` on initial load.

After compiling the TypeScript code and refreshing the page in your browser, you should see the character count updating in real-time as you type in the text area.

Common Mistakes and Troubleshooting

During the development process, you might encounter some common mistakes. Here are some of them and how to fix them:

  • Type Errors: TypeScript will highlight type errors during compilation. Make sure your variables and function parameters have the correct types. Review the error messages and fix the type mismatches.
  • HTML Element Not Found: If you get an error that an HTML element is null or undefined, double-check that the `id` of the element in your HTML matches the `id` you’re using in your TypeScript code. Also, ensure that the script tag that includes the generated JavaScript (`index.js`) is placed after the HTML elements it interacts with.
  • Compilation Errors: Make sure you’ve set up your `tsconfig.json` file correctly, and that you’re running the `tsc` command in the correct directory. Check for any syntax errors in your TypeScript code.
  • Incorrect Path to the JavaScript File: Ensure the path in the `<script src=”./dist/index.js”></script>` tag in your HTML file is correct. If the JavaScript file is not in the `dist` folder, you need to adjust the path accordingly.
  • Whitespace Issues: The word count might be off if there are extra spaces or line breaks in the text. Make sure the `countWords` function correctly handles whitespace.

By carefully reviewing your code, checking the console for errors, and comparing your code to the example code provided, you should be able to resolve any issues you encounter.

Key Takeaways and Best Practices

In this tutorial, we’ve covered the basics of building a word counter application with TypeScript. Here are the key takeaways:

  • TypeScript for Robustness: TypeScript adds static typing to JavaScript, improving code reliability and maintainability.
  • HTML Structure: The HTML file provides the user interface, including the text area for input and the display area for the word count.
  • TypeScript Code: The TypeScript code handles the word counting logic, updates the display, and interacts with the HTML elements.
  • Compilation: We need to compile the TypeScript code into JavaScript using the TypeScript compiler.
  • Event Handling: Event listeners are used to detect user input and trigger updates.
  • Best Practices: We’ve used best practices like separating concerns (HTML for structure, TypeScript for logic), and clear variable names.

By following these steps and best practices, you can build a functional and well-structured word counter application.

Frequently Asked Questions (FAQ)

Here are some frequently asked questions about building a word counter application with TypeScript:

  1. Can I use this word counter on a website? Yes, you can. You’ll need to deploy the HTML and JavaScript files to a web server.
  2. How can I add more features to the word counter? You can add features such as character counts, word frequency analysis, and different styling options.
  3. What are the benefits of using TypeScript for this project? TypeScript helps you write more maintainable code, catches errors early, and improves the overall development experience.
  4. How do I handle special characters in the word count? You can modify the `countWords` function to handle special characters by using regular expressions that include special character handling.
  5. Where can I learn more about TypeScript? You can find more information about TypeScript on the official TypeScript website and in various online tutorials.

The development of a word counter application, even in its simplest form, is a valuable exercise. It introduces you to the fundamentals of web development with TypeScript, from setting up the environment to manipulating HTML elements and handling user input. The application can be expanded upon, adding more features or refining existing ones. This process not only reinforces the concepts learned but also provides an opportunity to practice problem-solving skills and enhance your understanding of software development principles. Embrace the opportunity to experiment, try out new features, and refine your skills. The journey of building a web application is as important as the final product. Remember, the goal is not just to create a working word counter but to gain a deeper understanding of web development and TypeScript. Continue to learn, experiment, and refine your skills, and you’ll become more proficient in building web applications with TypeScript.

More posts