TypeScript Tutorial: Building a Simple Web Application for a Code Analyzer

Written by

learnmodernjavascript

in

In the world of web development, ensuring code quality and understanding its structure are paramount. As projects grow, manually reviewing code becomes tedious and error-prone. Imagine a tool that could automatically analyze your TypeScript code, identify potential issues, and provide insights into its design. This tutorial will guide you through building a simple web application for code analysis using TypeScript, empowering you to write cleaner, more maintainable code.

Why Code Analysis Matters

Code analysis goes beyond basic syntax checking. It delves into the structure, style, and potential flaws within your code. Here’s why it’s crucial:

  • Early Bug Detection: Identifies potential errors before they reach production.
  • Improved Code Quality: Enforces coding standards and best practices.
  • Enhanced Maintainability: Makes code easier to understand and modify.
  • Reduced Technical Debt: Prevents the accumulation of problematic code over time.

Project Overview: The Code Analyzer Application

Our application will allow users to input TypeScript code and receive analysis results. Key features include:

  • Code Input: A text area for users to paste or type their TypeScript code.
  • Analysis: Utilizing a TypeScript compiler API to parse and analyze the code.
  • Result Display: Displaying potential issues, warnings, and code metrics.

Setting Up the Project

Let’s get started by setting up the project environment.

1. Initialize the Project

Create a new directory for your project and navigate into it using your terminal. Then, initialize a new Node.js project:

mkdir code-analyzer-app
cd code-analyzer-app
npm init -y

2. Install Dependencies

We’ll need the TypeScript compiler and a simple web server (like `http-server`) for this project. Install them using npm:

npm install typescript http-server --save-dev

3. Configure TypeScript

Create a `tsconfig.json` file in your project root to configure the TypeScript compiler. Use the following basic configuration:

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

This configuration tells the compiler to:

  • Target ECMAScript 5 (ES5) for broader browser compatibility.
  • Use CommonJS modules.
  • Output compiled JavaScript files to a `dist` directory.
  • Enable strict type checking.
  • Allow ES module interoperation.
  • Skip type checking of library files.

4. Project Structure

Create the following directory structure:


code-analyzer-app/
├── src/
│   ├── index.ts
│   └── style.css
├── dist/
├── tsconfig.json
├── package.json
└── index.html

Building the Frontend (HTML & CSS)

Let’s create the basic HTML and CSS for our application.

1. index.html

Create an `index.html` file 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>Code Analyzer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>TypeScript Code Analyzer</h1>
        <div class="input-section">
            <textarea id="codeInput" placeholder="Paste your TypeScript code here..."></textarea>
            <button id="analyzeButton">Analyze</button>
        </div>
        <div class="output-section">
            <h2>Analysis Results</h2>
            <ul id="resultsList"></ul>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

This HTML sets up the basic layout: a title, a text area for code input, an analyze button, and a section to display the results.

2. style.css

Create a `style.css` file to add some basic styling:

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

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

h1 {
    text-align: center;
    color: #007bff;
}

.input-section {
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

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

.output-section {
    border-top: 1px solid #eee;
    padding-top: 20px;
}

#resultsList {
    list-style: none;
    padding: 0;
}

#resultsList li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

This CSS provides a basic, readable layout and styling for the application.

Building the Backend (TypeScript Code Analysis)

Now, let’s write the TypeScript code that will handle the code analysis.

1. index.ts

Create an `index.ts` file in the `src` directory with the following code:

// Import the TypeScript compiler API
import * as ts from 'typescript';

// Get references to HTML elements
const codeInput = document.getElementById('codeInput') as HTMLTextAreaElement;
const analyzeButton = document.getElementById('analyzeButton') as HTMLButtonElement;
const resultsList = document.getElementById('resultsList') as HTMLUListElement;

// Function to analyze the code
function analyzeCode(code: string): string[] {
    const results: string[] = [];

    // Create a TypeScript compiler host
    const compilerHost: ts.CompilerHost = {
        getSourceFile: (fileName, languageVersion) => {
            if (fileName === 'index.ts') {
                return ts.createSourceFile(fileName, code, ts.ScriptTarget.ES5, true);
            }
            return undefined;
        },
        writeFile: (fileName, text) => { },
        getDefaultLibFileName: () => 'lib.d.ts', // Provide a default library file
        useCaseSensitiveFileNames: () => false,
        getCanonicalFileName: fileName => fileName,
        getCurrentDirectory: () => '',
        getNewLine: () => 'n',
        fileExists: fileName => fileName === 'index.ts',
        readFile: () => undefined,
        resolveModuleNames: (moduleNames, containingFile, reusedNames, redirectedReference, options, containingSourceFile) => {
            return moduleNames.map(moduleName => {
                return {
                    resolvedFileName: moduleName + '.ts',
                    isExternalLibraryImport: false
                };
            });
        }
    };

    // Create a TypeScript program
    const program = ts.createProgram(['index.ts'], {
        noEmitOnError: true,
        noImplicitAny: true,
        target: ts.ScriptTarget.ES5,
        module: ts.ModuleKind.CommonJS,
        strict: true,
        esModuleInterop: true
    }, compilerHost);

    // Get the diagnostics (errors and warnings)
    const allDiagnostics = ts.getPreEmitDiagnostics(program);

    allDiagnostics.forEach(diagnostic => {
        if (diagnostic.file) {
            let { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start!);
            let message = ts.flattenDiagnosticMessageText(diagnostic.messageText, 'n');
            results.push(`Line ${line + 1}, Column ${character + 1}: ${message}`);
        } else {
            results.push(ts.flattenDiagnosticMessageText(diagnostic.messageText, 'n'));
        }
    });

    return results;
}

// Event listener for the analyze button
analyzeButton.addEventListener('click', () => {
    const code = codeInput.value;
    resultsList.innerHTML = ''; // Clear previous results
    const analysisResults = analyzeCode(code);
    analysisResults.forEach(result => {
        const listItem = document.createElement('li');
        listItem.textContent = result;
        resultsList.appendChild(listItem);
    });
});

Let’s break down this code:

  • Import TypeScript Compiler API: Imports the necessary modules from the `typescript` package.
  • Get HTML Elements: Retrieves references to the input, button, and results list elements.
  • analyzeCode Function:
    • Creates a `CompilerHost`: This is a crucial part. The host provides the compiler with the necessary environment to read and write files. It simulates a file system.
    • Creates a `Program`: This represents the compilation process. It’s configured with various options to control how the code is compiled, including error reporting.
    • Gets Diagnostics: Uses `ts.getPreEmitDiagnostics(program)` to get a list of diagnostic messages (errors, warnings, etc.) from the compiler.
    • Formats and Displays Results: Processes the diagnostics and displays them in the results list.
  • Event Listener: Attaches an event listener to the analyze button. When clicked, it gets the code from the text area, calls the `analyzeCode` function, and displays the results.

2. Building and Running the Application

Now, compile your TypeScript code:

tsc

This will create `index.js` in the `dist` directory. Then, start the web server:

npx http-server

Open your browser and navigate to `http://localhost:8080` (or the address provided by `http-server`). You should see your application. Paste some TypeScript code into the text area, click “Analyze”, and see the results.

Step-by-Step Instructions

Let’s go through the process step-by-step:

  1. Project Setup: As described above, initialize the project with `npm init -y`, install dependencies (`typescript`, `http-server`), configure `tsconfig.json`, and set up the project file structure.
  2. Frontend Development (HTML/CSS): Create the `index.html` and `style.css` files to define the user interface. Use a text area for code input, a button for analysis, and a list to display results.
  3. Backend Development (TypeScript): Write the `index.ts` file, which includes the code analysis logic. Key components: importing the TypeScript compiler API, creating a `CompilerHost`, creating a `Program`, getting diagnostics, and displaying results.
  4. Compilation: Use `tsc` to compile your TypeScript code into JavaScript.
  5. Running the Application: Use `http-server` (or a similar web server) to serve your application and access it in your browser.
  6. Testing: Paste valid and invalid TypeScript code into the input area and test the analysis functionality.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to address them:

  • Incorrect TypeScript Configuration: If you get compilation errors, double-check your `tsconfig.json` file. Ensure the `target` and `module` options are set correctly.
  • Incorrect Paths: Make sure the paths in your HTML and TypeScript files (e.g., the script tag in HTML) are correct.
  • Missing Dependencies: Ensure all necessary dependencies are installed using `npm install`.
  • CompilerHost Issues: The `CompilerHost` is crucial. Incorrectly implementing its methods (e.g., `getSourceFile`, `writeFile`) can lead to compilation errors. Carefully review the host implementation.
  • Incorrect Diagnostic Handling: Properly handle the diagnostic messages. Make sure you are correctly extracting and displaying the error messages and locations.

Enhancements and Advanced Features

Here are some ways to enhance the application:

  • Syntax Highlighting: Implement code syntax highlighting in the input area using a library like Prism.js or highlight.js.
  • Code Formatting: Integrate a code formatter (e.g., Prettier) to automatically format the code before analysis.
  • Real-time Analysis: Trigger the analysis as the user types, providing immediate feedback.
  • Custom Rules: Implement custom code analysis rules to check for specific coding style guidelines or potential issues.
  • Integration with Linters: Integrate with popular linters like ESLint or TSLint for more comprehensive code analysis.
  • Code Metrics: Calculate and display code metrics (e.g., cyclomatic complexity, lines of code) to provide more insights.
  • Error Highlighting: Highlight errors directly in the code input area.

Summary / Key Takeaways

In this tutorial, we’ve built a basic TypeScript code analyzer web application. We’ve covered the importance of code analysis, set up a development environment, built a simple frontend, and, most importantly, implemented the core code analysis logic using the TypeScript compiler API. We’ve also discussed common mistakes and potential enhancements. This application provides a foundation for more sophisticated code analysis tools, helping you improve code quality and maintainability in your TypeScript projects.

FAQ

Here are some frequently asked questions about this topic:

  1. What is the TypeScript compiler API? The TypeScript compiler API provides a programmatic interface to the TypeScript compiler, allowing you to parse, analyze, and transform TypeScript code.
  2. How does the CompilerHost work? The `CompilerHost` provides an abstraction layer that allows the compiler to interact with the file system. It provides methods to read files, write files, and resolve module names, allowing the compiler to work with code in memory or on the disk.
  3. Why is code analysis important? Code analysis helps you find bugs early, enforce coding standards, improve maintainability, and reduce technical debt.
  4. What are some popular TypeScript linters? ESLint with the TypeScript ESLint plugin and TSLint are popular choices for linting TypeScript code.
  5. Can I use this application with other languages? While this specific example uses the TypeScript compiler, the general concept of code analysis can be applied to other programming languages by using their respective compiler or parser APIs.

By understanding and applying these concepts, you can significantly improve the quality and maintainability of your TypeScript code. Remember that the journey of a thousand lines of code begins with a single, well-analyzed line. Embrace the power of code analysis and elevate your development workflow.

More posts