TypeScript Tutorial: Build a Simple Interactive Word Counter

Written by

learnmodernjavascript

in

In the digital age, content reigns supreme. Whether you’re crafting blog posts, writing code comments, or simply sending emails, the ability to quickly gauge the length of your text is invaluable. Manually counting words can be tedious and error-prone. This tutorial will guide you through building a simple, interactive word counter using TypeScript, providing a practical demonstration of TypeScript’s capabilities while solving a real-world problem. This project will not only teach you the fundamentals of TypeScript but also equip you with a useful tool for your daily workflow.

Why Build a Word Counter?

Word counters are more than just a novelty; they serve a variety of purposes:

  • Content Optimization: Helps you adhere to word count guidelines for articles, blog posts, or social media updates.
  • SEO Analysis: Assists in ensuring your content meets the optimal length for search engine optimization.
  • Writing Efficiency: Provides instant feedback on your writing, allowing you to refine your content on the fly.
  • Academic Purposes: Useful for students and researchers to meet assignment length requirements.

By building your own word counter, you gain a deeper understanding of TypeScript, event handling, and DOM manipulation. This tutorial will walk you through each step, making it easy to follow along, even if you’re new to TypeScript.

Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need:

  • Node.js and npm (or yarn): Essential for managing TypeScript and its dependencies. If you don’t have them, download them from https://nodejs.org/.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support. You can download it from https://code.visualstudio.com/.
  • TypeScript Compiler: We’ll install this locally in our project.

Step 1: Create a Project Directory

Open your terminal or command prompt and create a new directory for your project:

mkdir word-counter-app
cd word-counter-app

Step 2: Initialize npm

Initialize a new npm project in your directory:

npm init -y

This will create a `package.json` file in your project, which will hold information about your project and its dependencies.

Step 3: Install TypeScript

Install TypeScript as a development dependency:

npm install --save-dev typescript

This command downloads and installs the TypeScript compiler and its necessary packages.

Step 4: Create a `tsconfig.json` File

The `tsconfig.json` file configures the TypeScript compiler. You can generate a basic one using the TypeScript compiler:

npx tsc --init

This command creates a `tsconfig.json` file in your project directory. Open this file in your code editor and make the following changes (or ensure these are set):

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}
  • `target`: Specifies the JavaScript version to compile to. `ES5` is widely supported.
  • `module`: Specifies the module system. `commonjs` is commonly used for Node.js projects.
  • `outDir`: Specifies the output directory for the compiled JavaScript files.
  • `esModuleInterop`: Enables interoperability between CommonJS and ES modules.
  • `forceConsistentCasingInFileNames`: Enforces consistent casing in file names.
  • `strict`: Enables strict type checking.
  • `skipLibCheck`: Skips type checking of declaration files.
  • `include`: Specifies which files to include in the compilation.

Step 5: Create Project Structure

Create the following file structure in your project directory:

word-counter-app/
├── src/
│   └── index.ts
├── dist/
├── index.html
├── package.json
├── tsconfig.json
└── ...

In the `src` folder, we will put our TypeScript code. `index.html` will contain the HTML for our word counter, and `dist` will contain the compiled JavaScript files.

Writing the HTML (index.html)

Let’s create the HTML structure for our word counter. Create an `index.html` file in the root of your project and add the following code:

<!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>
</head>
<body>
    <div class="container">
        <h1>Word Counter</h1>
        <textarea id="text-input" rows="4" cols="50" placeholder="Enter your text here..."></textarea>
        <p>Word Count: <span id="word-count">0</span></p>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up the basic structure of our word counter:

  • A `textarea` element for the user to input text.
  • A `span` element with the ID “word-count” to display the word count.
  • A link to the `index.js` file (which we will generate from our TypeScript code).

Writing the TypeScript Code (index.ts)

Now, let’s write the TypeScript code that will handle the word counting logic. Create an `index.ts` file inside the `src` directory and add the following code:


// Get references to the HTML elements
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 {
    // Trim leading/trailing whitespace and split the string into words
    const words = text.trim().split(/s+/);
    // Return the number of words
    return words.filter(word => word !== "").length;
}

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

// Add an event listener to the textarea
textInput.addEventListener('input', updateWordCount);

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

Let’s break down this code:

  • Line 1-2: We get references to the `textarea` and the `span` element using their IDs. The `as HTMLTextAreaElement` and `as HTMLSpanElement` are type assertions, telling TypeScript the specific type of these elements.
  • Line 5-10: The `countWords` function takes a string as input, removes leading and trailing whitespace, splits the string into an array of words using whitespace as a delimiter, and returns the number of words. The `filter(word => word !== “”)` removes any empty strings that might result from multiple spaces.
  • Line 13-19: The `updateWordCount` function gets the text from the `textarea`, calls the `countWords` function to calculate the word count, and updates the `wordCountDisplay` element with the result.
  • Line 22: An event listener is added to the `textarea`. When the user types or pastes text into the textarea (the ‘input’ event), the `updateWordCount` function is called.
  • Line 25: The `updateWordCount` function is called initially when the page loads to display the initial word count (which will be 0 if the textarea is empty).

Compiling and Running the Code

Now, let’s compile and run our code:

Step 1: Compile the TypeScript code

Open your terminal and navigate to your project directory. Run the following command to compile your TypeScript code into JavaScript:

tsc

This command will use the `tsconfig.json` file to compile the `index.ts` file and create a `index.js` file in the `dist` directory.

Step 2: Open the HTML file in your browser

Open the `index.html` file in your web browser. You should see the word counter interface. As you type in the text area, the word count should update in real-time.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Element IDs: Make sure the IDs in your TypeScript code match the IDs in your HTML. Typos are a common source of errors.
  • Type Errors: TypeScript will help catch type errors during development. Carefully review the error messages in your code editor to understand and fix these errors. For example, ensure you are using the correct element types (e.g., `HTMLTextAreaElement`, `HTMLSpanElement`).
  • Whitespace Issues: The word count may be inaccurate if you don’t handle whitespace correctly. The `text.trim()` and `split(/s+/)` in the `countWords` function are crucial for handling leading/trailing spaces and multiple spaces between words.
  • Event Listener Problems: If the word count doesn’t update, check that the event listener is correctly attached to the `textarea`. Also, make sure that the `updateWordCount` function is correctly defined and called when the ‘input’ event occurs.
  • Incorrect File Paths: Ensure the path to your JavaScript file in the HTML file is correct (`<script src=”dist/index.js”></script>`).

Advanced Features and Enhancements

Once you’ve built the basic word counter, you can add more advanced features:

  • Character Count: Add a feature to display the character count along with the word count.
  • Readability Score: Integrate a readability score calculator (e.g., Flesch-Kincaid) to assess the text’s complexity.
  • Real-time Saving: Use local storage to save the user’s text as they type, so their work is not lost if they accidentally close the browser.
  • Word Frequency Counter: Display the most frequent words in the text.
  • Customization Options: Allow users to customize the appearance of the word counter (e.g., font size, colors).
  • Integration with APIs: Integrate with external APIs for grammar checking, spell checking, or translation.

Key Takeaways

In this tutorial, you learned how to:

  • Set up a TypeScript development environment.
  • Write HTML and TypeScript code to create a simple interactive word counter.
  • Use event listeners to respond to user input.
  • Manipulate the DOM to display dynamic content.
  • Handle whitespace and text formatting.

FAQ

Q: Why is my word count incorrect?

A: Double-check your HTML element IDs to ensure they match the IDs in your TypeScript code. Also, review the `countWords` function to make sure it handles whitespace correctly (using `.trim()` and `.split(/s+/)`).

Q: How do I add character counting?

A: In the `updateWordCount` function, get the length of the text using `text.length`. Then, display this value in a separate `<span>` element in your HTML.

Q: How can I save the text as the user types?

A: Use the `localStorage` API. In the `updateWordCount` function, save the `text` to `localStorage` using `localStorage.setItem(‘text’, text)`. When the page loads, check if there’s any text in `localStorage` using `localStorage.getItem(‘text’)` and populate the `textarea` with that text.

Q: How do I handle multiple spaces between words?

A: The regular expression `s+` in the `split()` method handles multiple spaces. This expression means “one or more whitespace characters.”

Q: How can I deploy this to a website?

A: You can deploy your word counter to a website by hosting the HTML, CSS (if you add any), and JavaScript files on a web server. Services like GitHub Pages, Netlify, and Vercel are great options for deploying static websites.

Building a word counter is a great starting point for understanding TypeScript, DOM manipulation, and event handling. By extending this basic application, you can explore more advanced concepts and build more complex and useful tools. Remember that the journey of a thousand lines of code begins with a single word. Keep practicing, experimenting, and exploring the power of TypeScript, and you’ll be well on your way to becoming a proficient developer. Embracing the learning process and continuously building upon your knowledge is key to success in the ever-evolving world of software development. As you continue to build and refine your skills, you’ll discover the immense potential of TypeScript and its ability to empower you to create innovative and impactful applications.

More posts