TypeScript Tutorial: Building a Simple Interactive 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 seasoned developer or just starting, a code editor allows for rapid prototyping, debugging, and experimentation. This tutorial guides you through building a simple, yet functional, interactive code editor using TypeScript. We’ll cover the essential components, from the basic HTML structure to the TypeScript logic that powers the editor’s functionality. By the end, you’ll have a working code editor, ready to be customized and expanded upon.

Why Build a Code Editor?

Creating a code editor isn’t just a fun project; it’s a practical learning experience. It allows you to:

  • Deepen your understanding of TypeScript: You’ll work with types, classes, interfaces, and other core TypeScript concepts.
  • Practice DOM manipulation: You’ll learn how to interact with HTML elements using JavaScript.
  • Explore event handling: You’ll handle user input, like key presses and mouse clicks.
  • Gain experience with code parsing and highlighting: While we’ll keep it simple, you’ll touch upon the basics of how code is interpreted.
  • Enhance your problem-solving skills: Building a code editor requires breaking down a complex task into smaller, manageable parts.

This tutorial is designed for beginners to intermediate developers. Basic knowledge of HTML, CSS, and JavaScript is helpful, but the code is explained in detail, so you can follow along even if you’re new to TypeScript.

Setting Up the Project

Before diving into the code, let’s set up the project structure. We’ll create a simple directory structure to keep things organized.

  1. Create a project directory: Choose a name for your project, like “code-editor-tutorial”, and create a directory with that name.
  2. Initialize a TypeScript project: Navigate to your project directory in your terminal and run npm init -y to create a package.json file. Then, install TypeScript using npm install typescript --save-dev.
  3. Create essential files: Inside your project directory, create the following files:
    • index.html: The HTML file for your editor’s structure.
    • style.css: The CSS file for styling.
    • src/index.ts: The main TypeScript file where we’ll write our code.
    • tsconfig.json: Configuration file for TypeScript.

Your project directory should now look something like this:

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

Now, let’s configure the tsconfig.json file. This file tells the TypeScript compiler how to compile your code. Create a basic configuration:

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

This configuration specifies that we’ll compile to ES5 (for broader browser compatibility), use CommonJS modules, output the compiled JavaScript to a “dist” directory, and enable strict type checking. The “include” array tells the compiler to look in the “src” directory for TypeScript files.

Building the HTML Structure

Next, let’s create the HTML structure for our code editor in index.html. We’ll keep it simple, with a text area for the code and a place to display the results.

<!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="code-editor" placeholder="Write your code here..."></textarea>
    <div id="output"></div>
  </div>
  <script src="dist/index.js"></script>
</body>
</html>

This HTML provides:

  • A textarea element with the ID “code-editor” where the user will write their code.
  • A div element with the ID “output” where the results of the code will be displayed.
  • A link to style.css for styling.
  • A script tag that loads the compiled JavaScript from dist/index.js.

Styling with CSS

Let’s add some basic styling to style.css to make the editor look presentable:

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 80%;
  max-width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

textarea {
  width: 100%;
  height: 300px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

#output {
  width: 100%;
  height: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: auto;
  background-color: #f9f9f9;
}

This CSS provides basic styling for the body, container, textarea, and output elements. It sets up a two-column layout using grid, making it easy to see the code and its output side-by-side.

Writing the TypeScript Logic

Now, let’s get to the core of the project: writing the TypeScript logic in src/index.ts. This is where we’ll handle user input, compile the code, and display the results.


const codeEditor = document.getElementById('code-editor') as HTMLTextAreaElement | null;
const output = document.getElementById('output') as HTMLDivElement | null;

function evaluateCode() {
  if (!codeEditor || !output) {
    return;
  }

  try {
    // Clear previous output
    output.innerHTML = '';

    // Get the code from the editor
    const code = codeEditor.value;

    // Evaluate the code using eval (use with caution!)
    const result = eval(code);

    // Display the result
    if (result !== undefined) {
      output.textContent = String(result);
    }
  } catch (error: any) {
    // Display any errors
    output.textContent = `Error: ${error.message}`;
  }
}

// Add an event listener to the textarea
if (codeEditor) {
  codeEditor.addEventListener('input', evaluateCode);
}

// Initial evaluation (optional)
evaluateCode();

Let’s break down this code:

  • Get DOM elements: We get references to the textarea (code editor) and the div (output) using their IDs. The as HTMLTextAreaElement | null and as HTMLDivElement | null are type assertions, telling TypeScript the expected type of the elements. We also handle the possibility of the elements not being found by checking for null.
  • evaluateCode() function: This function does the following:
    • Checks if the editor and output elements exist.
    • Clears any previous output from the output div.
    • Gets the code from the textarea.
    • Uses eval() to execute the code. Warning: Using eval() can be risky, especially if you’re dealing with untrusted code. For more complex editors, consider using a safer approach like a sandboxed JavaScript interpreter. For this tutorial’s purpose, it simplifies the example.
    • Displays the result of the evaluation in the output div. If there’s an error, it catches it and displays the error message.
  • Event Listener: We add an event listener to the textarea to listen for the “input” event (when the user types). Each time the user types, the evaluateCode() function is called.
  • Initial Evaluation (Optional): We call evaluateCode() once when the page loads to display any initial output or errors.

Compiling and Running the Code

Now that we have the HTML, CSS, and TypeScript code, let’s compile the TypeScript code and run the editor.

  1. Compile the TypeScript: In your terminal, navigate to your project directory and run npx tsc. This command uses the TypeScript compiler to transpile your .ts files into .js files, placing the output in the “dist” directory.
  2. Open index.html in your browser: You can either double-click the index.html file to open it in your browser or use a local development server (like the one provided by VS Code or a simple Python server) to serve the files.
  3. Test the editor: Type some JavaScript code into the text area, such as console.log("Hello, world!");. You won’t see anything displayed in the output div in this example (because console.log outputs to the browser’s console, not the page). Try this instead: 2 + 2. You should see the result, 4, in the output div.
  4. Troubleshooting:
    • Check the browser’s console: If you’re not seeing any output, open your browser’s developer console (usually by pressing F12 or right-clicking and selecting “Inspect”) and look for any errors.
    • Verify the file paths: Double-check that the script tag in index.html correctly points to the compiled JavaScript file (dist/index.js).
    • Check the TypeScript compilation output: If you’re having trouble compiling, make sure your tsconfig.json file is correctly configured and that there are no errors in your TypeScript code. Run npx tsc in your terminal and look for any error messages.

Enhancements and Next Steps

This is a basic code editor. Here are some ideas for enhancements and next steps:

  • Syntax Highlighting: Implement syntax highlighting to make the code easier to read. Libraries like Prism.js or highlight.js can help with this.
  • Code Completion: Add code completion to suggest possible code snippets and variable names as the user types.
  • Error Checking: Integrate a linter or a TypeScript compiler to provide real-time error checking.
  • Multiple Languages: Allow users to select different programming languages (e.g., JavaScript, Python, HTML, CSS).
  • Code Formatting: Integrate a code formatter (like Prettier) to automatically format the code.
  • Saving and Loading Code: Add functionality to save and load code from local storage or a backend.
  • Advanced Output: Instead of just displaying text, allow the output to render HTML elements, images, or other interactive content.
  • Use a safer alternative to `eval()`: Consider using a sandboxed JavaScript interpreter, such as `vm2` or similar libraries, to execute the code safely, especially if you plan to allow users to input arbitrary code.

Common Mistakes and How to Fix Them

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

  • Incorrect DOM element selection: Make sure you’re selecting the correct HTML elements using document.getElementById() and that the IDs match your HTML. Type assertions (e.g., as HTMLTextAreaElement) are crucial for TypeScript to understand the types of the elements.
  • Uncaught errors in eval(): If the user’s code has errors, the eval() function will throw an error. Make sure to wrap the eval() call in a try...catch block to handle these errors gracefully and display informative error messages to the user.
  • Incorrect event handling: Make sure you’re attaching the event listener to the correct element (the textarea in this case) and that the event type (e.g., “input”) is correct.
  • Incorrect file paths: Double-check that the file paths in your HTML (e.g., the script tag for the JavaScript file and the link tag for the CSS file) are correct relative to the HTML file’s location.
  • Type errors: Make sure your TypeScript code is free of type errors. The TypeScript compiler will help you catch these errors early in the development process. Pay close attention to the types of variables and function parameters.
  • Security vulnerabilities with `eval()`: Remember that using `eval()` can introduce security risks. Carefully consider the source of the code you’re executing and sanitize it thoroughly. For production environments, prioritize using a sandboxed JavaScript interpreter.

FAQ

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

  1. How do I add syntax highlighting?

    You can use libraries like Prism.js or highlight.js. These libraries take your code as input and automatically add HTML elements with CSS classes to style the code based on its syntax. You’ll typically need to load the library in your HTML, apply it to the code editor’s content, and update the highlighting whenever the user changes the code.

  2. How do I handle multiple programming languages?

    You would need to add a language selection feature (e.g., a dropdown menu). Based on the selected language, you would apply different syntax highlighting rules, possibly use a different compiler or interpreter, and adjust the code completion suggestions accordingly. You might also need to handle different file extensions.

  3. How do I save and load code?

    You can use local storage to save code in the browser. You’ll need to add buttons or menu options for saving and loading. When saving, store the code in local storage using localStorage.setItem("code", codeEditor.value). When loading, retrieve the code from local storage using localStorage.getItem("code") and set the textarea‘s value to the retrieved code.

  4. What are the security risks of using eval()?

    eval() executes arbitrary code, which means that if you allow users to input code that is then executed by eval(), they could potentially execute malicious code that could compromise your application or the user’s system. Always be extremely cautious when using eval(), and consider using a sandboxed JavaScript interpreter instead.

  5. Can I use this code editor for real-world projects?

    The basic code editor in this tutorial is a good starting point for learning, but it’s not ready for production use. It lacks features like syntax highlighting, error checking, and robust security. To use it in a real-world project, you’d need to add these features and thoroughly test it for security vulnerabilities.

Creating a functional code editor is a journey of learning and experimentation. This tutorial provides a solid foundation, and by building upon it, you can create a tool that is both useful and a testament to your growing skills. As you explore the possibilities, remember that the most rewarding aspect is not just the end product, but the process of learning and problem-solving that comes with it. Keep experimenting, keep coding, and your skills will continuously evolve, enabling you to build even more complex and innovative applications.

More posts