TypeScript Tutorial: Building a Simple Interactive Code Playground

Written by

learnmodernjavascript

in

In the world of web development, the ability to experiment with code in a real-time environment is invaluable. Whether you’re a seasoned developer wanting to test a new library or a beginner learning the ropes of a new language, a code playground provides an immediate feedback loop. This tutorial will guide you through building a simple, interactive code playground using TypeScript, HTML, and CSS. We’ll focus on creating a user-friendly interface where users can write TypeScript code, see the compiled JavaScript output, and execute it directly in the browser. This project not only teaches you about TypeScript compilation but also about front-end interactions and dynamic content updates.

Why Build a Code Playground?

Code playgrounds are more than just a fun project; they offer significant benefits for both learning and development. Here’s why building one is a worthwhile endeavor:

  • Immediate Feedback: See your code’s output instantly, allowing for rapid iteration and debugging.
  • Learning by Doing: Experiment with different code snippets and concepts without the overhead of setting up a complex development environment.
  • Prototyping: Quickly test ideas and build small prototypes without the need for a full-fledged application setup.
  • Educational Tool: A great resource for teaching and learning programming concepts.
  • Skill Enhancement: Practice your TypeScript skills and learn about front-end development.

This tutorial aims to make the process as straightforward as possible, breaking down each step into manageable parts. We’ll cover everything from setting up the project to handling user input and displaying the results.

Project Setup and Prerequisites

Before diving into the code, let’s set up our project environment. You’ll need:

  • Node.js and npm (or yarn): Required for managing project dependencies and running the TypeScript compiler.
  • A Code Editor: Such as Visual Studio Code, Sublime Text, or any other editor you prefer.
  • Basic Knowledge of HTML, CSS, and JavaScript: Familiarity with these technologies is beneficial, but we’ll explain the key concepts as we go.

Let’s create a new project directory and initialize it with npm:

mkdir code-playground
cd code-playground
npm init -y

This command creates a new directory, navigates into it, and initializes a new Node.js project. The -y flag accepts the default settings.

Installing TypeScript

Next, install TypeScript as a development dependency:

npm install --save-dev typescript

This command installs the TypeScript compiler and saves it as a development dependency in your package.json file.

Setting Up TypeScript Configuration

Create a tsconfig.json file in the root of your project. This file configures the TypeScript compiler. You can generate a basic tsconfig.json file using the following command:

npx tsc --init

This command creates a tsconfig.json file with default settings. You can customize these settings to suit your project’s needs. For our code playground, we’ll modify it to include the following:

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

Here’s what each option means:

  • target: Specifies the JavaScript version to compile to (ES5 in this case).
  • module: Specifies the module system (CommonJS).
  • outDir: Specifies the output directory for compiled JavaScript files (./dist).
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • strict: Enables strict type-checking options.
  • skipLibCheck: Skips type-checking of declaration files.
  • include: Specifies the files and directories to include in the compilation.

Creating the HTML Structure

Let’s create the basic HTML structure for our code playground. Create an index.html file in the root of your project directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Playground</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="code-editor">
            <textarea id="code" placeholder="Write your TypeScript code here..."></textarea>
            <button id="run-button">Run</button>
        </div>
        <div class="output-area">
            <h3>JavaScript Output:</h3>
            <pre id="js-output"></pre>
            <h3>Console Output:</h3>
            <pre id="console-output"></pre>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This HTML structure includes:

  • A textarea for the user to write TypeScript code.
  • A button to run the code.
  • Two pre elements to display the JavaScript output and console output.
  • A link to a CSS file for styling (style.css).
  • A link to a JavaScript file (script.js) where we’ll add our TypeScript logic.

Styling with CSS

Create a style.css file in the root of your project directory. This file will contain the CSS styles for our code playground. Here’s a basic styling example:

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

.container {
    display: flex;
    flex-direction: row;
    padding: 20px;
    height: 100vh;
}

.code-editor {
    flex: 1;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
}

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

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

button:hover {
    background-color: #3e8e41;
}

.output-area {
    flex: 1;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

pre {
    font-family: monospace;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
}

This CSS provides basic styling for the elements in our HTML, including the code editor, output area, and button. You can customize these styles to match your preferences.

Writing the TypeScript Logic

Now, let’s write the TypeScript code that will handle the user input, compile the TypeScript code, and display the output. Create a src directory and a file named script.ts inside it. This is where we’ll write our TypeScript code.

// Get references to the HTML elements
const codeEditor = document.getElementById('code') as HTMLTextAreaElement;
const runButton = document.getElementById('run-button') as HTMLButtonElement;
const jsOutput = document.getElementById('js-output') as HTMLPreElement;
const consoleOutput = document.getElementById('console-output') as HTMLPreElement;

// Function to clear the console output
function clearConsoleOutput() {
    consoleOutput.textContent = '';
}

// Override the console.log function to capture output
const originalConsoleLog = console.log;
console.log = function(...args) {
    const output = args.map(arg => {
        if (typeof arg === 'object') {
            return JSON.stringify(arg, null, 2);
        } else {
            return arg;
        }
    }).join(' ');
    consoleOutput.textContent += output + 'n';
    originalConsoleLog.apply(console, args);
};

// Function to compile and run the TypeScript code
async function runCode() {
    clearConsoleOutput();
    const code = codeEditor.value;

    try {
        // Use the TypeScript compiler to compile the code
        const result = await (window as any).ts.transpileModule(code, {
            compilerOptions: {
                module: (window as any).ts.ModuleKind.ESNext,
                target: (window as any).ts.ScriptTarget.ESNext,
                jsx: (window as any).ts.JsxEmit.React,
            },
        });

        // Display the JavaScript output
        jsOutput.textContent = result.outputText;

        // Execute the JavaScript code
        eval(result.outputText);

    } catch (error: any) {
        // Display any errors
        jsOutput.textContent = error.message || error.toString();
    }
}

// Add a click event listener to the run button
runButton.addEventListener('click', runCode);

// Initialize the TypeScript compiler (using a CDN for simplicity)
(async () => {
    const ts = await import('https://unpkg.com/typescript@4.0.0/lib/typescript.js');
    (window as any).ts = ts;
})();

Let’s break down this code:

  • Element References: We get references to the HTML elements we created earlier (textarea, button, and output areas).
  • Console Output Override: We override the console.log function to capture the output and display it in the console-output area. This is a crucial step for seeing the results of console.log statements within your TypeScript code.
  • runCode Function:
    • Clears the console output.
    • Gets the TypeScript code from the textarea.
    • Uses the TypeScript compiler (loaded from a CDN) to transpile the code into JavaScript.
    • Displays the JavaScript output in the js-output area.
    • Uses eval to execute the generated JavaScript code within the browser.
    • Handles any errors that occur during compilation or execution and displays them in the js-output area.
  • Event Listener: We add a click event listener to the “Run” button that calls the runCode function when clicked.
  • TypeScript Compiler Initialization: We load the TypeScript compiler using a CDN. This is for simplicity; in a real-world application, you would likely bundle the TypeScript compiler with your code.

Important Notes on the Code:

  • Using a CDN for the TypeScript Compiler: For simplicity, this tutorial uses a CDN (Content Delivery Network) to load the TypeScript compiler. In a production environment, you would typically bundle the compiler with your application.
  • eval(): The eval() function is used to execute the compiled JavaScript code. While eval() can be risky if used improperly (e.g., executing untrusted code), it’s a common and practical approach in code playgrounds for running user-provided code.
  • Error Handling: The code includes a try...catch block to handle any errors during compilation or execution, providing helpful feedback to the user.

Compiling and Running the Code

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

  1. Compile the TypeScript Code: Open your terminal and navigate to your project directory. Run the following command to compile the TypeScript code: 
    tsc

    This command will compile the .ts file in the src directory and output the corresponding .js file in the dist directory.

  2. Create a `script.js` file: After compiling, the output files will be in the `dist` folder. Copy the contents of the compiled `script.js` file from the `dist` folder into the `script.js` file in the root of your project. This is necessary because our HTML file is referencing `script.js` and not the `dist/script.js` file.
  3. Open the HTML File: Open the index.html file in your web browser.
  4. Test the Code Playground: You should now see the code playground interface. Write some TypeScript code in the textarea, click the “Run” button, and see the JavaScript output and console output.

Example Usage and Testing

Let’s test our code playground with some simple examples. Here are a few TypeScript code snippets you can try:

Example 1: Basic ‘Hello, World!’

console.log('Hello, World!');

When you run this code, you should see “Hello, World!” in the console output.

Example 2: Simple Variable Assignment and Output

let message: string = 'TypeScript is awesome!';
console.log(message);

This will output “TypeScript is awesome!” to the console.

Example 3: Function Definition and Execution


function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, 3));

This code will define a function add and then output the result of calling the function with the arguments 5 and 3 (which is 8) in the console.

These examples demonstrate the basic functionality of the code playground. You can experiment with more complex code snippets, including object creation, array manipulation, and more.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect File Paths: Double-check that the file paths in your index.html (e.g., for script.js and style.css) are correct.
  • Typos in Code: TypeScript is strict about syntax. Ensure you have no typos or syntax errors in your TypeScript code. The compiler will usually catch these, and the error messages in the JavaScript output area can help you identify them.
  • Incorrect Compiler Options: Make sure your tsconfig.json file is configured correctly. The target and module options are particularly important.
  • CORS Issues: If you are loading external resources (e.g., from a CDN), make sure there are no Cross-Origin Resource Sharing (CORS) issues. This is less likely with our current setup, but it can be a factor if you are making network requests.
  • Missing Dependencies: If you encounter errors about missing modules, make sure you have installed all necessary dependencies using npm.
  • Incorrect TypeScript Version: Ensure that the version of TypeScript you are using in your code playground is compatible with the code you are writing. Check the console for errors related to the TypeScript compiler.

Enhancements and Further Development

This code playground is a great starting point, but you can enhance it in many ways:

  • Syntax Highlighting: Implement syntax highlighting in the code editor to improve readability. Libraries like CodeMirror or Monaco Editor can be used.
  • Code Completion: Add code completion features to assist the user with writing code.
  • Error Highlighting: Highlight errors directly in the code editor, making it easier for users to identify and fix issues.
  • Save/Load Functionality: Allow users to save their code and load it later.
  • Multiple Files/Tabs: Support multiple files or tabs to organize larger projects.
  • Framework Integration: Allow users to select frameworks like React, Angular, or Vue.js and have the playground automatically configure the necessary build tools and dependencies.
  • More Compiler Options: Expose more TypeScript compiler options to the user, allowing for greater customization.
  • Dark Mode: Add a dark mode toggle to improve the user experience.

Key Takeaways

  • We’ve built a functional TypeScript code playground.
  • You’ve learned how to set up a TypeScript project, compile TypeScript code, and display the output.
  • You’ve gained experience with HTML, CSS, and JavaScript.
  • You’ve learned how to override console.log to capture output.
  • You understand the basic principles behind a code playground.

FAQ

Here are some frequently asked questions:

Q: Why is the JavaScript output empty?

A: This could be due to several reasons, including:

  • Syntax errors in your TypeScript code. Check the JavaScript output area for error messages.
  • Incorrect compiler settings in tsconfig.json.
  • Problems with the loading of the TypeScript compiler.

Q: How can I debug my TypeScript code?

A: The JavaScript output area shows the compiled JavaScript code. You can use browser developer tools (e.g., Chrome DevTools) to inspect the JavaScript code and set breakpoints. Also, examine the console output for any errors or messages from your console.log statements.

Q: Can I use external libraries in my code playground?

A: Yes, you can. You’ll need to include the library in your index.html file, either by downloading it and linking to it or by using a CDN. However, note that if the library has dependencies, you will need to include those as well.

Q: How do I handle user input in the code playground?

A: You can use the standard HTML input elements (e.g., <input>, <textarea>) to gather user input. Then, access the values of these elements in your TypeScript code.

Final Thoughts

This simple code playground gives you a practical understanding of how TypeScript code is compiled and executed in a browser environment. By expanding on this foundation, you can create a more sophisticated tool for learning, experimenting, and prototyping. The journey of building a code playground isn’t just about the final product; it’s about the skills you acquire along the way. Whether you’re a beginner taking your first steps into TypeScript or a seasoned developer looking to refine your skills, this project offers a valuable opportunity to solidify your understanding of front-end development and the power of TypeScript. The flexibility and immediate feedback of such a tool is a testament to the benefits of continuous learning and hands-on experimentation.

More posts