TypeScript Tutorial: Creating 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, manually checking your code for errors, style inconsistencies, and potential performance bottlenecks becomes increasingly tedious and error-prone. This is where code analysis tools come into play. These tools automatically scan your codebase, identifying issues and suggesting improvements, saving you valuable time and effort. In this tutorial, we’ll dive into how to create a simple web-based code analyzer using TypeScript, a language that brings static typing and enhanced features to JavaScript, making it ideal for building robust applications. We’ll explore the core concepts, walk through the implementation step-by-step, and equip you with the knowledge to build your own code analysis tool.

Why Build a Code Analyzer?

Before we jump into the code, let’s understand why building a code analyzer is beneficial:

  • Improved Code Quality: Code analyzers help identify potential bugs, style violations, and other issues that can impact the quality of your code.
  • Reduced Development Time: By automating the code review process, you can catch errors early and reduce the time spent debugging and fixing issues.
  • Enhanced Maintainability: Code analyzers enforce coding standards and best practices, making your code easier to understand and maintain over time.
  • Increased Team Productivity: Code analyzers can be integrated into your development workflow, ensuring that all team members adhere to the same coding standards.

Core Concepts

To build our code analyzer, we’ll need to understand a few key concepts:

1. TypeScript

TypeScript is a superset of JavaScript that adds static typing, classes, interfaces, and other features to improve code organization and maintainability. TypeScript code is compiled into JavaScript, which can then be run in any web browser or JavaScript runtime environment.

2. Abstract Syntax Trees (ASTs)

An Abstract Syntax Tree (AST) is a tree representation of the syntactic structure of source code. Code analyzers use ASTs to parse and analyze the code, identify errors, and suggest improvements. We’ll use a library to generate the AST for our code.

3. Code Analysis Rules

Code analysis rules define the specific checks that the analyzer performs on the code. These rules can check for a variety of issues, such as unused variables, style violations, and potential performance bottlenecks. We’ll define a few simple rules for our analyzer.

Setting Up the Project

Let’s start by setting up our project. We’ll need Node.js and npm (Node Package Manager) installed on your system. Open your terminal or command prompt and create a new project directory:

mkdir code-analyzer
cd code-analyzer

Next, initialize a new npm project:

npm init -y

This command will create a `package.json` file in your project directory. Now, let’s install the necessary dependencies:

npm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint

Here’s what each dependency does:

  • typescript: The TypeScript compiler.
  • @typescript-eslint/parser: Parses TypeScript code into an AST for ESLint to analyze.
  • @typescript-eslint/eslint-plugin: Provides ESLint rules specifically for TypeScript code.
  • eslint: The core linter that runs the rules and reports issues.

Next, let’s create a `tsconfig.json` file to configure the TypeScript compiler. In your project directory, create a file named `tsconfig.json` with the following content:

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

This configuration tells the TypeScript compiler to:

  • Compile to the latest ECMAScript version (`esnext`).
  • Use the CommonJS module system.
  • Output the compiled files to the `dist` directory.
  • Enable esModuleInterop for compatibility with JavaScript modules.
  • Enforce consistent casing in filenames.
  • Enable strict type checking.
  • Skip type checking of library files.
  • Include all files in the `src` directory.

Create a directory named `src` in your project directory. This is where we’ll put our TypeScript code. Finally, configure ESLint. Create a file named `.eslintrc.js` in the root of your project with the following content:

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  root: true,
  env: {
    node: true,
  },
  rules: {
    // Add custom rules here
  },
};

This configuration tells ESLint to:

  • Use the `@typescript-eslint/parser` to parse TypeScript code.
  • Use the `@typescript-eslint` plugin, which provides TypeScript-specific rules.
  • Extend the recommended ESLint and `@typescript-eslint` rulesets.
  • Set the root of the configuration to the current directory.
  • Enable Node.js environment variables.
  • Allows us to add custom rules in the `rules` section.

Creating the Code Analyzer Logic

Now, let’s start building the core logic of our code analyzer. We’ll create a simple class that takes code as input, parses it, and applies a set of rules to identify issues. Create a file named `src/analyzer.ts` and add the following code:

import { ESLint } from 'eslint';

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

export class CodeAnalyzer {
  private eslint: ESLint;

  constructor() {
    this.eslint = new ESLint({
      useEslintrc: false, // We'll manage the config in .eslintrc.js
      overrideConfig: {
        parser: '@typescript-eslint/parser',
        plugins: ['@typescript-eslint'],
        extends: [
          'eslint:recommended',
          'plugin:@typescript-eslint/recommended',
        ],
        rules: {
          // Add custom rules here
          'no-unused-vars': 'warn',
          '@typescript-eslint/no-explicit-any': 'warn',
        },
      },
    });
  }

  async analyze(code: string): Promise {
    const results = await this.eslint.lintText(code);
    const issues: Issue[] = [];

    for (const result of results) {
      for (const message of result.messages) {
        issues.push({
          line: message.line || 0,
          column: message.column || 0,
          message: message.message,
          rule: message.ruleId || 'unknown',
        });
      }
    }

    return issues;
  }
}

Let’s break down this code:

  • Import ESLint: We import the `ESLint` class from the `eslint` library.
  • Define the Issue Interface: We define an `Issue` interface to represent the issues found by the analyzer. It includes the line number, column number, message, and rule ID.
  • CodeAnalyzer Class: This class is the core of our analyzer.
  • Constructor: The constructor initializes an ESLint instance with our configuration. Notice that we are overriding the configuration to include the rules we want to use.
  • analyze Method: This asynchronous method takes the code as input, uses ESLint to analyze it, and returns an array of `Issue` objects. It uses the `lintText` method to analyze the provided code.

Implementing Code Analysis Rules

Our `CodeAnalyzer` is currently using the default ESLint rules. Let’s add some custom rules to detect specific issues. We’ll add two simple rules:

  • no-unused-vars: This rule detects unused variables in the code.
  • @typescript-eslint/no-explicit-any: This rule detects the use of `any` type, which can reduce type safety.

These rules are already included in the `plugin:@typescript-eslint/recommended` ruleset, so we don’t need to add any additional code for the rules to work. You can add more complex custom rules by writing your own ESLint plugins, but that’s beyond the scope of this tutorial.

Using the Code Analyzer

Now, let’s create a simple script to use our code analyzer. Create a file named `src/index.ts` and add the following code:

import { CodeAnalyzer } from './analyzer';

async function main() {
  const code = `
function greet(name: string) {
  const message = "Hello, " + name;
  console.log(message);
}

greet("World");

const unusedVariable = 123;
  
function testAny(value: any) {
    console.log(value);
  }
`;

  const analyzer = new CodeAnalyzer();
  const issues = await analyzer.analyze(code);

  if (issues.length > 0) {
    console.log('Code Analysis Results:');
    issues.forEach((issue) => {
      console.log(`  Line ${issue.line}, Column ${issue.column}: ${issue.message} (${issue.rule})`);
    });
  } else {
    console.log('No issues found.');
  }
}

main().catch(console.error);

This code:

  • Imports the `CodeAnalyzer` class.
  • Defines a sample code snippet with an unused variable and a function using `any`.
  • Creates an instance of `CodeAnalyzer`.
  • Calls the `analyze` method to analyze the code.
  • Prints the analysis results to the console.

Running the Code Analyzer

To run the code analyzer, add a script to your `package.json` file to compile and run the code. Open your `package.json` file and add the following scripts to the `scripts` section:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

Now, in your terminal, run the following commands:

npm run build
npm run start

You should see the following output in your console:

Code Analysis Results:
  Line 9, Column 1: 'unusedVariable' is declared but never used. (no-unused-vars)
  Line 12, Column 16: The type 'any' is not assignable to a type which can be statically analyzed. Consider using a more specific type. (@typescript-eslint/no-explicit-any)

This output shows that our code analyzer has successfully identified the unused variable and the use of the `any` type.

Adding a Web Interface (Optional)

To make our code analyzer more user-friendly, we can add a web interface. This will allow users to paste their code into a text area and see the analysis results in real-time. We’ll use HTML, CSS, and JavaScript for the front-end and integrate with our TypeScript code for the back-end.

1. Create HTML file (index.html)

Create an `index.html` file in your project directory with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Code Analyzer</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
        }
        .issue {
            color: red;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h2>TypeScript Code Analyzer</h2>
    <textarea id="code" placeholder="Paste your TypeScript code here..."></textarea>
    <button id="analyzeButton">Analyze Code</button>
    <div id="results"></div>

    <script>
        const codeTextArea = document.getElementById('code');
        const analyzeButton = document.getElementById('analyzeButton');
        const resultsDiv = document.getElementById('results');

        analyzeButton.addEventListener('click', async () => {
            const code = codeTextArea.value;
            resultsDiv.innerHTML = ''; // Clear previous results

            try {
                const response = await fetch('/analyze', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ code })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const issues = await response.json();

                if (issues.length > 0) {
                    issues.forEach(issue => {
                        const issueElement = document.createElement('div');
                        issueElement.classList.add('issue');
                        issueElement.textContent = `Line ${issue.line}, Column ${issue.column}: ${issue.message} (${issue.rule})`;
                        resultsDiv.appendChild(issueElement);
                    });
                } else {
                    resultsDiv.textContent = 'No issues found.';
                }
            } catch (error) {
                console.error('Error analyzing code:', error);
                resultsDiv.textContent = `Error: ${error.message}`;
            }
        });
    </script>
</body>
</html>

This HTML file provides a text area for the user to input their code, a button to trigger the analysis, and a div to display the results. It also includes basic styling and JavaScript to handle user interaction.

2. Modify `index.ts` to include a simple server

We’ll use a simple HTTP server (using the `http` module in Node.js) to handle the analysis requests from our web interface. Modify `src/index.ts` to include a basic server:

import { CodeAnalyzer } from './analyzer';
import http from 'http';
import { URL } from 'url';

const analyzer = new CodeAnalyzer();

const server = http.createServer(async (req, res) => {
  const parsedUrl = new URL(req.url!, `http://${req.headers.host}`);
  const pathname = parsedUrl.pathname;

  if (req.method === 'POST' && pathname === '/analyze') {
    let body = '';
    req.on('data', (chunk) => {
      body += chunk.toString();
    });
    req.on('end', async () => {
      try {
        const { code } = JSON.parse(body);
        const issues = await analyzer.analyze(code);
        res.setHeader('Content-Type', 'application/json');
        res.writeHead(200);
        res.end(JSON.stringify(issues));
      } catch (error) {
        console.error('Error processing request:', error);
        res.setHeader('Content-Type', 'application/json');
        res.writeHead(500);
        res.end(JSON.stringify({ error: 'Internal Server Error' }));
      }
    });
  } else if (pathname === '/') {
    // Serve the HTML file
    res.setHeader('Content-Type', 'text/html');
    res.writeHead(200);
    // Read and serve the index.html file
    const fs = require('fs');
    const htmlContent = fs.readFileSync('index.html', 'utf8');
    res.end(htmlContent);
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Explanation:

  • Import http: Imports the built-in `http` module.
  • Create a server: Creates an HTTP server using `http.createServer()`.
  • Handle POST requests to /analyze: This part handles the analysis requests from the web interface. It reads the code from the request body, calls the `analyzer.analyze()` method, and sends the results back as a JSON response.
  • Serve index.html: Serves the HTML file when a request to `/` is received.
  • Start the server: Starts the server and listens on port 3000.

3. Install Dependencies for the server

You need to install the `http` module. However, since it’s a built-in module, there’s no need to install it with npm. The `fs` module is also built-in. Make sure you have Node.js installed correctly.

4. Run the application

Build and run the application using the following commands:

npm run build
npm run start

Open your web browser and go to `http://localhost:3000`. You should see the web interface. Paste your code into the text area and click the “Analyze Code” button. The analysis results will be displayed below.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a code analyzer:

  • Incorrect ESLint Configuration: Make sure your `.eslintrc.js` file is correctly configured to parse TypeScript code and use the appropriate plugins and rules. Double-check that you’ve installed the necessary dependencies (`@typescript-eslint/parser`, `@typescript-eslint/eslint-plugin`).
  • Missing Dependencies: Ensure you have installed all the required dependencies using npm. Run `npm install` in your project directory to install any missing dependencies.
  • Incorrect File Paths: Make sure the file paths in your `tsconfig.json` and in your import statements are correct.
  • Incorrect Server Setup: When setting up the server, ensure that the server is correctly processing the incoming requests, parsing the JSON data, and sending the results back to the client. Check your browser’s developer console for any network errors.
  • Not Handling Errors: Always handle potential errors in your code, such as invalid input, network errors, or exceptions during code analysis. Use `try…catch` blocks to gracefully handle errors and provide informative error messages to the user.
  • Not Clearing Previous Results: If you’re building a web interface, make sure to clear the previous analysis results before displaying the new results. Otherwise, the old results will remain visible and could confuse the user.

Key Takeaways

  • Code analyzers are essential tools for improving code quality, reducing development time, and enhancing maintainability.
  • TypeScript is a great choice for building code analyzers due to its static typing and features.
  • ASTs are used to represent the syntactic structure of the code, enabling the analyzer to identify issues.
  • ESLint provides a powerful framework for analyzing code and enforcing coding standards.
  • You can customize the analysis by defining your own rules or using existing rules.
  • Adding a web interface makes the analyzer more user-friendly.

FAQ

Here are some frequently asked questions about building a code analyzer:

  1. Can I use this code analyzer for other languages?
    • The core concept of using an AST and analysis rules can be applied to other languages. However, you would need to use a parser and a linter specific to that language.
  2. How can I add more custom rules?
    • You can create your own ESLint plugins or use existing ones. ESLint plugins allow you to define custom rules that check for specific patterns or issues in your code.
  3. How can I integrate this into my existing development workflow?
    • You can integrate the code analyzer into your IDE, build process, or continuous integration (CI) pipeline. Many IDEs have ESLint integration, which will automatically show you the issues as you type. You can also configure your build process to fail if the code analyzer finds any issues.
  4. What are some other code analysis tools?
    • Besides ESLint, other popular code analysis tools include Prettier (for code formatting), SonarQube (for comprehensive code quality analysis), and linters specific to different languages.
  5. Is it possible to automatically fix the issues found by the code analyzer?
    • Yes, some linters, like ESLint, can automatically fix some of the issues they find. You can configure ESLint to automatically fix certain types of issues when you run it.

Building a code analyzer is a valuable skill for any developer. By understanding the core concepts and following the steps outlined in this tutorial, you can create your own tool to improve the quality of your code and streamline your development workflow. Remember to experiment with different rules, integrate the analyzer into your development process, and continuously improve your code analysis skills. With practice, you’ll be well on your way to writing cleaner, more efficient, and more maintainable code.

More posts