TypeScript Tutorial: Building a Simple Web-Based Code Analyzer

Written by

learnmodernjavascript

in

In the world of web development, writing clean, efficient, and maintainable code is paramount. As projects grow in complexity, the need for tools that can automatically analyze code for potential issues becomes increasingly important. This is where code analyzers come in. They help developers catch errors, enforce coding standards, and improve overall code quality. In this tutorial, we’ll dive into building a simple web-based code analyzer using TypeScript. This hands-on project will not only teach you the fundamentals of TypeScript but also provide you with practical experience in creating a useful development tool.

Why Build a Code Analyzer?

Before we jump into the code, let’s explore why building a code analyzer is a valuable exercise. Code analyzers offer several benefits:

  • Early Error Detection: They can identify syntax errors, type errors, and other common mistakes before you even run your code.
  • Code Quality Improvement: They can check for style violations, unused variables, and other issues that can make your code harder to read and maintain.
  • Faster Debugging: By highlighting potential problems, code analyzers can significantly reduce the time you spend debugging.
  • Enforcement of Coding Standards: They ensure that your team’s code adheres to consistent style guidelines, leading to better collaboration and easier maintenance.

Building a code analyzer from scratch gives you a deep understanding of how these tools work under the hood. You’ll learn how to parse code, identify patterns, and report issues, skills that are invaluable for any software developer.

Setting Up Your Development Environment

To get started, you’ll need to set up your development environment. This involves installing Node.js, npm (Node Package Manager), and TypeScript. Here’s how:

  1. Install Node.js and npm: If you don’t have them already, download and install Node.js from the official website (https://nodejs.org/). npm comes bundled with Node.js.
  2. Create a Project Directory: Create a new directory for your project, for example, `code-analyzer`.
  3. Initialize npm: Open your terminal, navigate to your project directory, and run `npm init -y`. This creates a `package.json` file.
  4. Install TypeScript: In your terminal, run `npm install typescript –save-dev`. This installs TypeScript as a development dependency.
  5. Create a `tsconfig.json` file: Run `npx tsc –init` in your terminal. This creates a `tsconfig.json` file, which configures the TypeScript compiler. You can customize this file to adjust how TypeScript compiles your code. For this tutorial, the default settings will work fine.

Your project directory should now look something like this:

code-analyzer/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└──

Building the Core Components

Now, let’s start building the core components of our code analyzer. We’ll focus on three main parts:

  • Parsing the Code: This involves taking the code as input and converting it into a structured representation that the analyzer can understand. We’ll use a library called `acorn` for this.
  • Analyzing the Code: This is where we’ll implement the logic to identify potential issues in the code. We’ll look for things like unused variables, missing semicolons, and other common errors.
  • Reporting the Results: This involves displaying the identified issues to the user in a clear and understandable format.

1. Parsing the Code with Acorn

Acorn is a fast JavaScript parser. It takes JavaScript code as input and produces an Abstract Syntax Tree (AST), a tree-like representation of the code’s structure. Install it using npm:

npm install acorn

Create a file named `analyzer.ts` and add the following code:

import * as acorn from 'acorn';

function parseCode(code: string): acorn.Node {
  try {
    return acorn.parse(code, { ecmaVersion: 'latest' });
  } catch (error: any) {
    console.error('Parsing error:', error.message);
    throw error; // Re-throw the error to be handled elsewhere
  }
}

export { parseCode };

In this code:

  • We import the `acorn` library.
  • The `parseCode` function takes a string of code as input and uses `acorn.parse` to generate the AST.
  • The `ecmaVersion: ‘latest’` option tells Acorn to parse the latest JavaScript syntax.
  • Error handling is included to catch and report parsing errors.

2. Analyzing the Code

Now, let’s create the analysis logic. This is where the code analyzer will look for specific issues. Create a file named `analysis.ts` and add the following code:

import { parseCode } from './analyzer';
import * as acorn from 'acorn';

interface Issue {
  line: number;
  message: string;
}

function analyzeCode(code: string): Issue[] {
  const issues: Issue[] = [];
  try {
    const ast = parseCode(code);

    // Example: Check for unused variables (simplified)
    if (ast.type === 'Program') {
      const declaredVariables = new Set();
      const usedVariables = new Set();

      // Collect declared variables
      acorn.walk.simple(ast, {
        VariableDeclaration(node: any) {
          node.declarations.forEach((declaration: any) => {
            if (declaration.id.type === 'Identifier') {
              declaredVariables.add(declaration.id.name);
            }
          });
        },
        Identifier(node: any) {
          usedVariables.add(node.name);
        },
      });

      declaredVariables.forEach((variable) => {
        if (!usedVariables.has(variable)) {
          issues.push({ line: 1, message: `Unused variable: ${variable}` }); // Simplified line number
        }
      });
    }
  } catch (error) {
    // Errors are already logged in parseCode
    issues.push({ line: 1, message: 'Code analysis failed. See console for details.' });
  }
  return issues;
}

export { analyzeCode, Issue };

Here’s what this code does:

  • It imports the `parseCode` function from `analyzer.ts`.
  • It defines an `Issue` interface to represent code analysis issues.
  • The `analyzeCode` function takes the code as input, parses it using `parseCode`, and then analyzes the AST to identify potential issues.
  • The example implementation checks for unused variables. It uses `acorn.walk.simple` to traverse the AST and identify variable declarations and usages.
  • It returns an array of `Issue` objects, each describing a found issue.

3. Reporting the Results

Now, let’s create a simple user interface to display the analysis results. Create a file named `index.html` 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>Code Analyzer</title>
    <style>
        body {
            font-family: sans-serif;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
        }
        .issue {
            color: red;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h2>Code Analyzer</h2>
    <textarea id="code" placeholder="Enter your code here"></textarea>
    <button onclick="analyze()">Analyze Code</button>
    <div id="results"></div>

    <script type="module">
        import { analyzeCode, Issue } from './analysis.js';

        function analyze() {
            const code = document.getElementById('code').value;
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = ''; // Clear previous results

            try {
                const issues: Issue[] = analyzeCode(code);
                if (issues.length === 0) {
                    resultsDiv.innerHTML = '<p>No issues found.</p>';
                } else {
                    issues.forEach(issue => {
                        const issueElement = document.createElement('div');
                        issueElement.classList.add('issue');
                        issueElement.textContent = `Line ${issue.line}: ${issue.message}`;
                        resultsDiv.appendChild(issueElement);
                    });
                }
            } catch (error) {
                resultsDiv.innerHTML = '<p>An error occurred during analysis.</p>';
            }
        }
    </script>
</body>
</html>

This HTML file includes:

  • A text area for the user to enter code.
  • A button to trigger the analysis.
  • A `div` to display the analysis results.
  • JavaScript code that imports the `analyzeCode` function and displays the issues in the results `div`.

Putting It All Together

Now, let’s create the main entry point for our application. Create a file named `index.ts` and add the following code:

// This file is not directly used in the browser.  It's for potential server-side operations or testing.
// The main application logic is within the <script> tag in index.html.
console.log("Code Analyzer Initialized");

This file simply logs a message to the console. The actual application logic resides within the `index.html` file, as the code analysis happens directly in the browser.

Running the Code Analyzer

To run the code analyzer:

  1. Compile the TypeScript code: Open your terminal and run `tsc`. This will compile your TypeScript files (`analyzer.ts`, `analysis.ts`, and `index.ts`) into JavaScript files (`analyzer.js`, `analysis.js`, and `index.js`). The compiled JavaScript files will be in the same directory as the TypeScript files.
  2. Open `index.html` in your browser: Open the `index.html` file in your preferred web browser.
  3. Enter Code and Analyze: Enter some JavaScript code into the text area and click the “Analyze Code” button. The analyzer will parse the code, look for issues (currently, unused variables), and display the results below.

Here’s an example of how the analyzer might work. Enter the following code into the text area:


function myFunction() {
  let unusedVariable = 10;
  console.log("Hello, world!");
}

When you click “Analyze Code”, the analyzer should identify the `unusedVariable` as an issue, and display “Line 1: Unused variable: unusedVariable” in the results area.

Adding More Analysis Rules

The current code analyzer only checks for unused variables. You can extend it to check for other common issues. Here are some ideas:

  • Missing Semicolons: Check for lines of code that are missing semicolons at the end.
  • Unused Imports: Identify imported modules that are not used in the code.
  • Cyclomatic Complexity: Measure the complexity of functions and report those that exceed a certain threshold.
  • Code Style Violations: Check for code style violations, such as inconsistent indentation or line lengths.
  • Type Errors: (If you integrate with a TypeScript compiler service) Identify type errors in your code.

To add a new rule, you’ll need to:

  1. Understand the AST: Familiarize yourself with the structure of the AST generated by Acorn.
  2. Write a Function to Analyze the AST: Create a function that traverses the AST and looks for the specific issue.
  3. Report the Issue: If an issue is found, create an `Issue` object and add it to the `issues` array.

For example, to check for missing semicolons, you might write a function that checks if each statement ends with a semicolon. If a statement is missing a semicolon, you would add an issue to the `issues` array.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building code analyzers, and how to avoid them:

  • Ignoring Error Handling: Always include error handling in your code, especially when parsing code. Parsing can fail due to syntax errors. Use `try…catch` blocks to handle potential errors and provide informative error messages to the user.
  • Not Considering Edge Cases: Test your code analyzer with various code snippets, including edge cases. These might include complex control structures, nested functions, and unusual syntax.
  • Over-Complicating the Analysis: Start with simple rules and gradually add more complex ones. Avoid over-engineering your analyzer from the start.
  • Poor Performance: If your analyzer becomes slow, optimize your code. This might involve caching results, using efficient algorithms, or avoiding unnecessary computations.
  • Not Providing Clear Error Messages: Make sure the error messages are clear and easy to understand. They should tell the user exactly what the problem is and where it is located.

Key Takeaways

  • TypeScript is a powerful language: TypeScript’s static typing and other features make it a great choice for building robust and maintainable code analyzers.
  • Code analyzers improve code quality: They help you catch errors, enforce coding standards, and improve overall code quality.
  • Acorn is a useful tool: Acorn is a fast and efficient JavaScript parser that can be used to generate ASTs.
  • Building a code analyzer is a valuable learning experience: It deepens your understanding of code analysis and helps you write better code.

FAQ

  1. Can I use this code analyzer for production code?

    This code analyzer is a simplified example. While it can be useful for learning and simple checks, it’s not designed for production use. For production code analysis, consider using more mature tools like ESLint, Prettier, or SonarQube.

  2. How can I integrate this with an existing project?

    You can integrate this code analyzer into your existing projects by installing the necessary dependencies (Acorn, TypeScript), creating the analysis logic, and running it as part of your build process or as a pre-commit hook.

  3. How can I add support for different JavaScript versions?

    The `ecmaVersion` option in the `acorn.parse` function controls the JavaScript version to be parsed. You can change this value to support different versions. For example, use `’es5’` for ES5 or `’es2020’` for ES2020. Consider making this configurable in your analyzer.

  4. What are the limitations of this code analyzer?

    This code analyzer is limited in scope. It does not support all JavaScript features and may not catch all potential issues. It’s also not integrated with a TypeScript compiler service, so it won’t catch type errors. It’s meant as a starting point for learning code analysis.

  5. Where can I learn more about ASTs?

    You can learn more about Abstract Syntax Trees (ASTs) by reading the Acorn documentation, exploring online resources, and experimenting with AST visualizers. Understanding ASTs is crucial for building effective code analyzers.

This tutorial has provided a foundation for building your own web-based code analyzer. You’ve learned how to parse code, analyze it for potential issues, and display the results. By expanding on this foundation, you can create a powerful tool that significantly improves your code quality and development workflow. Remember, the best way to learn is to experiment and iterate. Try adding more analysis rules, improving the user interface, and integrating it with your favorite code editor. As you delve deeper into the world of code analysis, you’ll discover new ways to write cleaner, more efficient, and more maintainable code.

More posts