TypeScript Tutorial: Building a Simple Interactive Web-Based Code Editor

Written by

learnmodernjavascript

in

In the world of web development, the ability to write and test code directly in your browser is incredibly valuable. Whether you’re a beginner learning the ropes or a seasoned developer prototyping a new feature, a web-based code editor can significantly streamline your workflow. This tutorial will guide you through building a simple, yet functional, interactive code editor using TypeScript. We’ll cover everything from setting up the project to implementing core features like syntax highlighting and code execution. By the end, you’ll have a practical understanding of how to leverage TypeScript to create dynamic and engaging web applications.

Why Build a Web-Based Code Editor?

Web-based code editors offer several advantages over traditional desktop IDEs. They are:

  • Accessible: Accessible from any device with a web browser.
  • Collaborative: Facilitate real-time collaboration on code.
  • Lightweight: Typically require less system resources.
  • Educational: Ideal for learning and experimenting with code without complex setup.

This tutorial will not only teach you how to build a code editor, but also provide a solid foundation in TypeScript, covering essential concepts like types, interfaces, classes, and event handling. This knowledge is transferable to a wide range of web development projects.

Setting Up the Project

Let’s get started by setting up our project. We’ll use a straightforward structure to keep things organized.

  1. Create a Project Directory: Create a new directory for your project, for example, `code-editor`.
  2. Initialize npm: Navigate to your project directory in your terminal and initialize a new npm project using `npm init -y`. This will create a `package.json` file.
  3. Install TypeScript: Install TypeScript globally or locally within your project using `npm install typescript –save-dev`.
  4. Create `tsconfig.json`: Initialize a TypeScript configuration file using `npx tsc –init`. This file allows you to configure TypeScript compiler options.
  5. Create Project Files: Create the following files in your project directory:
    • `index.html`: The main HTML file.
    • `src/index.ts`: The main TypeScript file where we’ll write our code.
    • `style.css`: The CSS file for styling.

Your project structure should look similar to this:

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

Writing the HTML

Let’s create a basic HTML structure for our code editor. In `index.html`, 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>Simple Code Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <textarea id="codeEditor"></textarea>
        <button id="runButton">Run</button>
        <div id="output"></div>
    </div>
    <script src="src/index.js"></script>
</body>
</html>

This HTML sets up a `textarea` for code input, a button to run the code, and a `div` to display the output.

Styling with CSS

Now, let’s add some basic styling to make our code editor look presentable. In `style.css`, add the following CSS:

.container {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 20px auto;
}

#codeEditor {
    width: 100%;
    height: 300px;
    padding: 10px;
    font-family: monospace;
    font-size: 14px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

#runButton {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#output {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    font-family: monospace;
    font-size: 14px;
}

This CSS provides a basic layout and styling for the editor, textarea, button, and output area.

Writing the TypeScript Code

Now comes the core of our code editor: the TypeScript code. Open `src/index.ts` and start by selecting the HTML elements and setting up event listeners.

// Get references to HTML elements
const codeEditor = document.getElementById('codeEditor') as HTMLTextAreaElement;
const runButton = document.getElementById('runButton') as HTMLButtonElement;
const output = document.getElementById('output') as HTMLDivElement;

// Add an event listener to the run button
runButton.addEventListener('click', () => {
    // Get the code from the editor
    const code = codeEditor.value;

    // Clear the output
    output.textContent = '';

    try {
        // Evaluate the code
        const result = eval(code);

        // Display the result
        output.textContent = String(result);
    } catch (error) {
        // Handle errors
        output.textContent = 'Error: ' + (error as Error).message;
    }
});

Let’s break down this code:

  • Element Selection: We use `document.getElementById` to select the HTML elements by their IDs and cast them to their respective types (e.g., `HTMLTextAreaElement`). This is crucial for type safety in TypeScript.
  • Event Listener: We attach a click event listener to the `runButton`. This listener will execute the code when the button is clicked.
  • Code Retrieval: Inside the event listener, we retrieve the code from the `codeEditor` textarea using `codeEditor.value`.
  • Output Clearing: We clear the `output` div before each execution to remove any previous results.
  • Code Execution with `eval()`: We use the `eval()` function to execute the code. Important Note: Using `eval()` can be risky if you’re not careful about the code you’re executing. In a production environment, you’d likely use a safer approach like a sandboxed JavaScript interpreter.
  • Error Handling: We wrap the `eval()` call in a `try…catch` block to handle any errors that might occur during code execution. Error messages are displayed in the `output` div.

Compiling and Running the Code

Before we can run our code, we need to compile the TypeScript code into JavaScript. Open your terminal and run the following command in the project directory:

tsc

This command uses the TypeScript compiler (`tsc`) to compile `src/index.ts` into `src/index.js`. The compiled JavaScript file will be linked in your `index.html` file. Now open `index.html` in your web browser. You should see the code editor, and you can start typing and running JavaScript code. For example, try typing `console.log(‘Hello, world!’);` in the editor and clicking the

More posts