TypeScript Tutorial: Building a Simple Web-Based Code Diff Checker

Written by

learnmodernjavascript

in

In the world of software development, changes are constant. Code evolves, features are added, and bugs are squashed. This constant flux necessitates tools that help us understand and manage these changes effectively. One of the most fundamental of these tools is a code diff checker, a utility that highlights the differences between two versions of a piece of code. This tutorial will guide you through building a simple, yet functional, web-based code diff checker using TypeScript. We’ll focus on clarity, practicality, and ease of understanding, making it perfect for beginners and intermediate developers alike.

Why Build a Code Diff Checker?

Imagine you’re working on a project with a team. You’ve made some changes to a specific file, and you need to review them before submitting your code for review. Or, perhaps you are trying to understand the changes made by a colleague. A code diff checker allows you to quickly identify these changes – additions, deletions, and modifications – without manually comparing the code line by line. This saves time, reduces errors, and improves collaboration. Furthermore, building such a tool is an excellent exercise for learning TypeScript, understanding fundamental web development concepts, and gaining practical experience with algorithms for comparing text.

Core Concepts: TypeScript and Web Technologies

Before we dive into the code, let’s briefly touch upon the key technologies we’ll be using:

  • TypeScript: A superset of JavaScript that adds static typing. This helps catch errors early in the development process, improves code readability, and allows for better tooling and refactoring.
  • HTML: The foundation of any webpage. We’ll use HTML to structure our diff checker’s interface.
  • CSS: Used for styling the webpage, making it visually appealing and easy to use.
  • JavaScript (with TypeScript): The language that brings our diff checker to life. It handles the logic of comparing the code and displaying the differences.

Step-by-Step Guide: Building the Code Diff Checker

1. Setting Up the Project

First, let’s set up our project directory and install the necessary dependencies. Open your terminal and run the following commands:

mkdir code-diff-checker
cd code-diff-checker
npm init -y
npm install typescript @types/node
npx tsc --init

This will create a new directory, initialize a Node.js project, install TypeScript and its type definitions for Node.js, and create a `tsconfig.json` file. The `tsconfig.json` file configures how TypeScript compiles your code. You can customize it as needed, but for this tutorial, the default settings will work fine.

2. Creating the HTML Structure

Next, let’s create the HTML file (`index.html`) for our diff checker. This file will contain the basic structure of our webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Diff Checker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Code Diff Checker</h1>
        <div class="input-container">
            <textarea id="code1" placeholder="Enter Code 1"></textarea>
            <textarea id="code2" placeholder="Enter Code 2"></textarea>
        </div>
        <button id="diffButton">Compare</button>
        <div id="diffOutput"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This HTML provides two text areas for inputting the code, a button to trigger the comparison, and a `div` to display the diff output. We’ve also linked a stylesheet (`style.css`) and a JavaScript file (`script.js`), which we’ll create next.

3. Styling with CSS

Create a `style.css` file to add some basic styling to make our diff checker look presentable.

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

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

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.input-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

textarea {
    width: 48%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: block;
    margin: 10px auto;
}

button:hover {
    background-color: #3e8e41;
}

#diffOutput {
    margin-top: 20px;
    font-family: monospace;
    white-space: pre-wrap;
}

.added {
    background-color: #ccffcc;
}

.removed {
    background-color: #ffcccc;
}

This CSS provides basic styling for the layout, text areas, button, and the diff output. We’ve also included styles for highlighting added and removed lines.

4. Implementing the TypeScript Logic

Now, let’s write the TypeScript code (`script.ts`) that will handle the diff logic. This is where the core functionality of our diff checker resides.


// Function to perform the diff
function diff(code1: string, code2: string): string {
    const lines1 = code1.split('n');
    const lines2 = code2.split('n');
    const diffOutput: string[] = [];

    // Iterate through lines and compare
    for (let i = 0; i < Math.max(lines1.length, lines2.length); i++) {
        const line1 = lines1[i];
        const line2 = lines2[i];

        if (line1 !== line2) {
            if (line1 === undefined) {
                diffOutput.push(`<span class="added">+ ${line2}</span>`);
            } else if (line2 === undefined) {
                diffOutput.push(`<span class="removed">- ${line1}</span>`);
            } else {
                diffOutput.push(`<span class="removed">- ${line1}</span>`);
                diffOutput.push(`<span class="added">+ ${line2}</span>`);
            }
        } else {
            diffOutput.push(line1 || line2 || ""); // Handle empty lines
        }
    }

    return diffOutput.join('n');
}


// Get references to HTML elements
const code1TextArea = document.getElementById('code1') as HTMLTextAreaElement;
const code2TextArea = document.getElementById('code2') as HTMLTextAreaElement;
const diffButton = document.getElementById('diffButton') as HTMLButtonElement;
const diffOutputDiv = document.getElementById('diffOutput') as HTMLDivElement;

// Add event listener to the button
diffButton?.addEventListener('click', () => {
    if (code1TextArea && code2TextArea && diffOutputDiv) {
        const code1 = code1TextArea.value;
        const code2 = code2TextArea.value;
        const diffResult = diff(code1, code2);
        diffOutputDiv.innerHTML = diffResult;
    }
});

Let’s break down this code:

  • `diff(code1: string, code2: string): string` Function:
    • Takes two strings (code1 and code2) as input.
    • Splits each string into an array of lines.
    • Iterates through the lines, comparing them.
    • If a line is different, it marks it as added or removed using HTML `<span>` tags with the classes “added” and “removed” for styling.
    • Returns the result as a string, with HTML tags for formatting.
  • HTML Element References: The code retrieves references to the HTML elements (text areas, button, output div) using `document.getElementById()`. Type assertions (`as HTMLTextAreaElement`, etc.) are used to tell TypeScript the expected type of these elements.
  • Event Listener: An event listener is attached to the button. When the button is clicked, it retrieves the code from the text areas, calls the `diff` function, and displays the result in the `diffOutputDiv`.

5. Compiling and Running the Code

Now, let’s compile the TypeScript code to JavaScript and run our diff checker. Open your terminal and run the following commands:

tsc

This command will compile `script.ts` into `script.js`. Then, open `index.html` in your web browser. You should see the two text areas, the compare button, and the output area. Paste some code into the text areas, make some changes in one of them, and click the “Compare” button. The differences should be highlighted in the output area.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect File Paths: Make sure the file paths in your HTML (`<script src=”script.js”>`, `<link rel=”stylesheet” href=”style.css”>`) are correct relative to your `index.html` file. Double-check for typos.
  • Type Errors: TypeScript will catch type errors during compilation. Read the error messages carefully and fix any type mismatches. Use type annotations (e.g., `const myVariable: string = “hello”;`) to help TypeScript understand your code.
  • Incorrect Element IDs: Make sure the element IDs in your JavaScript code (e.g., `document.getElementById(‘code1’)`) match the IDs in your HTML.
  • Uninitialized Variables: Always initialize your variables before using them. TypeScript can help catch these errors, but it’s good practice to initialize variables to avoid unexpected behavior.
  • Logic Errors in the `diff` Function: Carefully review the logic in the `diff` function to ensure it correctly identifies and highlights the differences. Test with various code snippets to catch edge cases (e.g., empty lines, added/removed lines at the beginning or end of the code).

Enhancements and Next Steps

This is a basic implementation, but there’s plenty of room for improvement. Here are some ideas for enhancing your code diff checker:

  • More Sophisticated Diff Algorithms: The current algorithm is a basic line-by-line comparison. Consider using more advanced algorithms like the Longest Common Subsequence (LCS) algorithm for more accurate diffing, especially when lines are rearranged.
  • Syntax Highlighting: Integrate a syntax highlighting library (e.g., Prism.js, highlight.js) to make the code in the text areas and the diff output more readable.
  • Line Numbers: Add line numbers to the code areas to make it easier to pinpoint changes.
  • User Interface Improvements: Improve the user interface with features like a clear button, the ability to load files, or different display modes (e.g., side-by-side diff).
  • Error Handling: Implement more robust error handling (e.g., handling invalid input, displaying error messages to the user).
  • Support for Different File Types: Extend the functionality to support different file types, like XML or JSON.

Key Takeaways

  • You’ve learned how to build a simple web-based code diff checker using TypeScript, HTML, and CSS.
  • You understand the basic concepts of comparing text and highlighting differences.
  • You’ve gained experience with fundamental web development technologies.
  • You’ve learned how to structure a project, write HTML, style with CSS, and implement JavaScript logic.
  • You’ve been introduced to common mistakes and how to fix them.

FAQ

Q: What is the purpose of a code diff checker?

A code diff checker is used to identify the differences between two versions of code. It helps developers understand changes, review code, and collaborate more effectively.

Q: Why use TypeScript for this project?

TypeScript adds static typing to JavaScript, making the code more readable, maintainable, and less prone to errors. It also provides better tooling and refactoring capabilities.

Q: What are some alternative diff algorithms?

While the line-by-line comparison is straightforward, more advanced algorithms like the Longest Common Subsequence (LCS) algorithm can provide more accurate and sophisticated diff results, especially when lines are rearranged or moved.

Q: How can I improve the user interface?

You can improve the user interface by adding syntax highlighting, line numbers, clear buttons, and different display modes (e.g., side-by-side diff). Consider using a CSS framework like Bootstrap or Tailwind CSS to speed up development.

Q: Where can I learn more about TypeScript?

The official TypeScript documentation (https://www.typescriptlang.org/docs/) is an excellent resource. You can also find numerous tutorials and courses online.

Building a code diff checker is more than just a coding exercise; it’s a journey into understanding how software evolves. The core principle of highlighting changes, of making the invisible visible, applies not just to code, but to many aspects of development and collaboration. As you refine your diff checker, remember that the most valuable tool is the ability to adapt and improve, to constantly seek clarity and efficiency in your work. Embrace the iterative process, and you’ll find yourself not only building a useful tool but also sharpening your skills as a developer.

More posts