TypeScript Tutorial: Creating a Simple Web-Based Code Search Application

Written by

learnmodernjavascript

in

In the vast landscape of web development, the ability to quickly and efficiently search through code is an invaluable skill. Whether you’re a seasoned developer navigating a complex codebase or a newcomer trying to understand existing projects, a robust code search tool can significantly boost your productivity. This tutorial will guide you, step-by-step, through creating a simple, yet functional, web-based code search application using TypeScript.

Why Build a Code Search Application?

Imagine you’re working on a large project and need to find all instances where a specific function is called or a particular variable is used. Manually sifting through files, line by line, is time-consuming and prone to errors. A code search application streamlines this process, allowing you to:

  • Quickly locate code snippets.
  • Understand how different parts of your code interact.
  • Refactor code with confidence.
  • Debug issues more effectively.

Building this tool provides a practical application of TypeScript, allowing you to practice core concepts like type safety, interfaces, and asynchronous operations. Furthermore, it’s a project you can expand upon, adding features like regular expression support or the ability to search across multiple repositories.

Prerequisites

Before we begin, ensure you have the following installed and set up:

  • Node.js and npm: Node.js provides the runtime environment for JavaScript, and npm (Node Package Manager) helps manage project dependencies. You can download them from nodejs.org.
  • TypeScript: TypeScript is the language we’ll be using. You can install it globally using npm: npm install -g typescript.
  • A Text Editor or IDE: VS Code, Sublime Text, or WebStorm are excellent choices.

Project Setup

Let’s create a new project directory and initialize it:

  1. Open your terminal or command prompt.
  2. Create a new directory for your project: mkdir code-search-app
  3. Navigate into the new directory: cd code-search-app
  4. Initialize a new npm project: npm init -y (This creates a package.json file.)

Next, we’ll set up TypeScript:

  1. Install TypeScript as a dev dependency: npm install --save-dev typescript
  2. Create a tsconfig.json file in the root of your project: tsc --init

The tsconfig.json file configures how TypeScript compiles your code. You can customize this file, but for this tutorial, the default settings will suffice. A basic configuration will look like this (you might have more options, but this is a good starting point):

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

This configuration specifies that TypeScript should compile to ES5 JavaScript, use CommonJS modules, output the compiled files to a dist directory, and look for source files in the src directory. The strict: true option enables strict type checking, which is highly recommended for writing robust code.

Creating the HTML Structure

We’ll start with a simple HTML file to provide the user interface. Create a file named index.html in the root of your project (or in a public directory if you prefer).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Search App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Code Search</h1>
        <div class="search-input">
            <input type="text" id="search-term" placeholder="Enter search term">
            <button id="search-button">Search</button>
        </div>
        <div id="results">
            <!-- Search results will appear here -->
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides:

  • A title and basic structure.
  • A search input field (<input type="text" id="search-term">) for the user to enter their search query.
  • A search button (<button id="search-button">) to trigger the search.
  • A results area (<div id="results">) where the search results will be displayed.
  • A link to a style.css file for styling.
  • A link to the compiled JavaScript file (dist/index.js).

Styling with CSS (style.css)

Create a file named style.css in the same directory as your index.html file. This will hold the CSS styles to make our application look nicer. Here’s a basic example:


body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

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

h1 {
    text-align: center;
    color: #333;
}

.search-input {
    display: flex;
    margin-bottom: 20px;
}

#search-term {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

#search-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
}

#search-button:hover {
    background-color: #0056b3;
}

#results {
    margin-top: 20px;
}

.result-item {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

.result-item strong {
    color: #007bff;
}

This CSS provides basic styling for the page, including the container, headings, input field, button, and result items. Feel free to customize this to your liking.

Writing the TypeScript Code (src/index.ts)

Now, let’s write the core TypeScript logic for our code search application. Create a file named index.ts in a src directory within your project.


// Define an interface for search results
interface SearchResult {
    file: string;
    line: number;
    content: string;
}

// Function to simulate searching a file (replace with your actual search logic)
async function searchFile(searchTerm: string, filePath: string): Promise<SearchResult[]> {
    // Simulate reading a file and searching for the term
    try {
        const response = await fetch(filePath);
        const fileContent = await response.text();
        const results: SearchResult[] = [];
        const lines = fileContent.split('n');

        for (let i = 0; i < lines.length; i++) {
            if (lines[i].includes(searchTerm)) {
                results.push({
                    file: filePath,
                    line: i + 1,
                    content: lines[i].trim()
                });
            }
        }

        return results;
    } catch (error) {
        console.error(`Error reading file ${filePath}:`, error);
        return [];
    }
}

// Function to handle the search
async function performSearch() {
    const searchTerm = (document.getElementById('search-term') as HTMLInputElement).value;
    const resultsContainer = document.getElementById('results') as HTMLElement;

    // Clear previous results
    resultsContainer.innerHTML = '';

    if (!searchTerm) {
        resultsContainer.innerHTML = '<p>Please enter a search term.</p>';
        return;
    }

    // Define the files to search (replace with your actual file paths)
    const filesToSearch = ['file1.txt', 'file2.txt', 'file3.txt'];

    // Fetch the text files (create these files in your project directory for testing)
    try {
        const searchPromises = filesToSearch.map(filePath => searchFile(searchTerm, filePath));
        const allResults = await Promise.all(searchPromises);
        const combinedResults = allResults.flat(); // Flatten the array of arrays

        if (combinedResults.length === 0) {
            resultsContainer.innerHTML = '<p>No results found.</p>';
            return;
        }

        // Display the results
        combinedResults.forEach(result => {
            const resultElement = document.createElement('div');
            resultElement.classList.add('result-item');
            resultElement.innerHTML = `
                <p>File: <strong>${result.file}</strong>, Line: ${result.line}</p>
                <p>${result.content}</p>
            `;
            resultsContainer.appendChild(resultElement);
        });

    } catch (error) {
        console.error('An error occurred during the search:', error);
        resultsContainer.innerHTML = '<p>An error occurred during the search.</p>';
    }
}

// Add event listener to the search button
document.getElementById('search-button')?.addEventListener('click', performSearch);

Let’s break down this code:

  • SearchResult Interface: Defines the structure of a search result, including the file name, line number, and the matching line of code.
  • searchFile Function: This is the core of the search functionality. It takes a search term and a file path as input. For this tutorial, it simulates reading a file (using fetch) and searching for the term. In a real-world application, you would replace this with logic to read from your actual code files (e.g., using Node.js’s fs module if running in a Node.js environment or a backend API to handle file reading). It returns an array of SearchResult objects.
  • performSearch Function: This function handles the user’s search query. It retrieves the search term from the input field, clears any previous results, and then calls the searchFile function for each file specified in the filesToSearch array. It then displays the search results in the results div.
  • Event Listener: An event listener is added to the search button to trigger the performSearch function when the button is clicked.

Important: You’ll need to create the files specified in the filesToSearch array (file1.txt, file2.txt, and file3.txt) in your project directory. Populate these files with some sample text and code to test the search functionality. For example:

file1.txt:


This is the first file.
This file contains the word "search".
Another line of text.

file2.txt:


This is the second file.
More text here.
Searching for "search" again.

file3.txt:


This is the third file.
Testing the search feature.
Search is important.

Compiling and Running the Application

Now, let’s compile the TypeScript code and run the application:

  1. Compile the TypeScript code: In your terminal, run tsc. This will compile the index.ts file and generate a dist/index.js file.
  2. Serve the application: You can use a simple web server to serve the HTML and JavaScript files. One easy way is to use the http-server package (install it globally if you don’t have it): npm install -g http-server. Then, navigate to your project directory in the terminal and run http-server.
  3. Open the application in your browser: The http-server command will typically tell you the URL where the application is running (e.g., http://localhost:8080). Open this URL in your web browser.
  4. Test the search: Enter a search term in the input field (e.g., “search”) and click the search button. You should see the matching lines from the text files displayed in the results area.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to address them:

  • Incorrect File Paths: Ensure that the file paths in your filesToSearch array and the paths used in the searchFile function (if you’re using a different file reading method) are correct relative to your project directory. Double-check for typos.
  • Type Errors: TypeScript’s type checking can help catch errors early. Make sure you’ve defined your interfaces and types correctly. If you see type errors in your IDE or during compilation (tsc), carefully review the error messages and ensure your code aligns with the defined types. Use the error messages to guide your debugging.
  • Asynchronous Operations: Working with fetch (or any other asynchronous operation) requires you to handle promises correctly. Make sure you’re using async/await or .then() and .catch() to handle the asynchronous nature of file reading. If you’re not handling promises correctly, your search results might not appear, or they might appear in the wrong order.
  • Incorrect DOM Manipulation: When manipulating the DOM (e.g., adding results to the page), make sure you’re selecting the correct elements using document.getElementById() or other methods. Ensure that you’re appending elements correctly. If you’re not seeing any results, check the browser’s developer console for errors related to DOM manipulation.
  • CORS (Cross-Origin Resource Sharing) Issues: If you’re trying to fetch files from a different domain, you might encounter CORS errors. The browser’s security features prevent a web page from making requests to a different domain than the one that served the web page, unless the server at the other domain explicitly allows it. For local development, you can often bypass this by using a browser extension that disables CORS or by using a proxy server. For production, you’ll need to configure the server hosting the files to allow requests from your domain.

Enhancements and Next Steps

This simple code search application can be extended in many ways:

  • Real Code Search: Replace the searchFile function’s simulation with actual code search logic. You could use the Node.js fs module to read files from the file system. For more complex searching, consider using libraries like glob to find files based on patterns or regular expressions.
  • Regular Expression Support: Allow users to use regular expressions in their search queries for more powerful pattern matching.
  • File Filtering: Add options to filter the files that are searched (e.g., by file extension, file path, or file name).
  • Syntax Highlighting: Display the search results with syntax highlighting to make them easier to read. Libraries like Prism.js or highlight.js can be used for this.
  • Error Handling: Improve error handling to provide more informative error messages to the user and handle edge cases gracefully.
  • Backend Integration: For larger codebases, you might want to move the search functionality to a backend server to improve performance and avoid exposing your code files directly to the client. The backend can handle file reading and searching, and the frontend can communicate with the backend via API calls.
  • UI/UX improvements: Refine the user interface for a better user experience.

Key Takeaways

This tutorial has shown you how to build a basic web-based code search application using TypeScript. You’ve learned about:

  • Setting up a TypeScript project.
  • Creating an HTML user interface.
  • Writing TypeScript code to handle user input, perform searches, and display results.
  • Understanding asynchronous operations and promises.
  • Debugging common issues.

By building this application, you’ve gained practical experience with essential TypeScript concepts and web development techniques. This project serves as a foundation for creating more sophisticated code analysis tools.

While the example uses simple text files, the principles apply to searching through code files as well. You can adapt the searchFile function to read and process code files, extracting relevant information and displaying the results. You can also integrate this application with existing code repositories or build a new one from scratch. The possibilities are endless, and the more you experiment, the more you’ll understand how to effectively utilize TypeScript and its power in web development.

More posts