TypeScript Tutorial: Building a Simple Web Application for a Code Snippet Manager

Written by

learnmodernjavascript

in

In the world of web development, we often find ourselves reusing code snippets. Whether it’s a frequently used function, a complex CSS style, or a piece of JavaScript logic, the ability to store and quickly access these snippets can significantly boost productivity. Imagine the time saved by having all your favorite code snippets at your fingertips, ready to be pasted into your projects. This tutorial will guide you through building a simple web application using TypeScript to manage your code snippets.

Why Build a Code Snippet Manager?

As developers, we constantly encounter repetitive tasks. A code snippet manager helps streamline these by:

  • Saving Time: Quickly access and reuse code, avoiding the need to rewrite or search for snippets repeatedly.
  • Improving Consistency: Ensure consistent code across projects by using pre-tested and approved snippets.
  • Boosting Productivity: Reduce the cognitive load by storing complex logic, allowing you to focus on the bigger picture.

What We’ll Build

We will create a web application that allows you to:

  • Add new code snippets with a title, description, and the code itself.
  • View a list of all saved snippets.
  • Edit existing snippets.
  • Delete snippets.
  • Search for snippets by title or description.

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js and npm: Used for managing dependencies and running the development server.
  • TypeScript: Globally installed (npm install -g typescript).
  • A code editor: Such as Visual Studio Code, Sublime Text, or Atom.

Project Setup

Let’s start by setting up our project:

  1. Create a Project Directory: Create a new directory for your project (e.g., code-snippet-manager) and navigate into it using your terminal.
  2. Initialize npm: Run npm init -y to create a package.json file.
  3. Install Dependencies: We’ll need a few dependencies. Install them with: 
    npm install --save-dev typescript @types/node
    • typescript: The TypeScript compiler.
    • @types/node: Type definitions for Node.js.
  4. Create TypeScript Configuration: Generate a tsconfig.json file using tsc --init. This file configures the TypeScript compiler. You can customize this file based on your project’s needs. For a basic setup, the default settings are often sufficient.
  5. Create Project Structure: Create the following file structure: 
    code-snippet-manager/
├── src/
│   ├── index.ts
│   └── models/
│       └── snippet.ts
├── tsconfig.json
└── package.json

Defining the Snippet Model

Let’s define a Snippet model to represent our code snippets. Create a file named snippet.ts inside the src/models directory:

// src/models/snippet.ts
export interface Snippet {
  id: string;
  title: string;
  description: string;
  code: string;
  language: string; // e.g., "javascript", "typescript", "html", "css"
}

This interface defines the structure of each snippet: an ID (unique identifier), title, description, the actual code, and the programming language of the code. We’ll add methods later to add, update, and delete snippets.

Creating the Core Application Logic

Now, let’s write the core application logic in index.ts:

// src/index.ts
import { Snippet } from './models/snippet';

// In-memory storage for snippets.  In a real application, you'd use a database.
let snippets: Snippet[] = [];

// Helper function to generate a unique ID
function generateId(): string {
  return Math.random().toString(36).substring(2, 15);
}

// Function to add a new snippet
function addSnippet(title: string, description: string, code: string, language: string): Snippet {
  const newSnippet: Snippet = {
    id: generateId(),
    title,
    description,
    code,
    language,
  };
  snippets.push(newSnippet);
  console.log('Snippet added:', newSnippet);
  return newSnippet;
}

// Function to get all snippets
function getSnippets(): Snippet[] {
  return snippets;
}

// Function to find a snippet by ID
function getSnippetById(id: string): Snippet | undefined {
  return snippets.find(snippet => snippet.id === id);
}

// Function to update a snippet
function updateSnippet(id: string, updates: Partial): Snippet | undefined {
  const snippetIndex = snippets.findIndex(snippet => snippet.id === id);
  if (snippetIndex === -1) {
    return undefined;
  }
  snippets[snippetIndex] = { ...snippets[snippetIndex], ...updates, id: snippets[snippetIndex].id }; // Ensure ID remains unchanged
  console.log('Snippet updated:', snippets[snippetIndex]);
  return snippets[snippetIndex];
}

// Function to delete a snippet
function deleteSnippet(id: string): boolean {
  const initialLength = snippets.length;
  snippets = snippets.filter(snippet => snippet.id !== id);
  console.log('Snippet deleted.  Snippets remaining:', snippets);
  return snippets.length < initialLength; // Returns true if a snippet was deleted
}

// Example usage
const snippet1 = addSnippet(
  'Hello World Function',
  'A simple function that prints Hello, World!',
  'function helloWorld() { console.log("Hello, World!"); }',
  'javascript'
);

const snippet2 = addSnippet(
  'Simple HTML Structure',
  'Basic HTML structure with title and body.',
  '<!DOCTYPE html><html><head><title>My Page</title></head><body></body></html>',
  'html'
);

console.log('All snippets:', getSnippets());

if (snippet1) {
    updateSnippet(snippet1.id, { description: 'Updated description' });
}

deleteSnippet(snippet2.id);

Let’s break down this code:

  • Imports: We import the Snippet interface from ./models/snippet.
  • `snippets` Array: This array holds our snippet data in memory. In a real application, you’d use a database (e.g., MongoDB, PostgreSQL, or even local storage in a browser) for persistent storage.
  • `generateId()`: Generates a unique ID for each snippet. This is a simplified implementation; in a production environment, you would use a more robust ID generation strategy (e.g., UUIDs).
  • `addSnippet()`: Adds a new snippet to the snippets array. It takes the title, description, code, and language as input.
  • `getSnippets()`: Returns all snippets.
  • `getSnippetById()`: Finds a snippet by its ID.
  • `updateSnippet()`: Updates an existing snippet. It takes the snippet ID and an object containing the updates. It uses the spread operator (...) to merge the updates with the existing snippet data, ensuring that only the specified fields are changed. The ID is explicitly kept the same.
  • `deleteSnippet()`: Removes a snippet by its ID.
  • Example Usage: Demonstrates how to add, update, and delete snippets, and how to retrieve all snippets.

Compiling and Running the Code

To compile your TypeScript code, run the following command in your terminal:

tsc

This will compile your .ts files into .js files in the same directory. Now, you can run the JavaScript code using Node.js:

node dist/index.js

You should see the output of the example usage in your console, showing the snippets being added, updated, and deleted.

Adding a User Interface (UI) with HTML and JavaScript (Simplified Example)

While the above code works, it’s not very user-friendly. Let’s create a basic HTML file (index.html) and some JavaScript (index.js) to provide a simple UI. This example will use basic DOM manipulation for simplicity. For a more complex application, consider using a framework like React, Angular, or Vue.js.

Create an index.html file in the root directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Snippet Manager</title>
</head>
<body>
    <h2>Code Snippet Manager</h2>

    <div id="snippet-form">
        <h3>Add New Snippet</h3>
        <label for="title">Title:</label>
        <input type="text" id="title" name="title"><br>

        <label for="description">Description:</label>
        <textarea id="description" name="description"></textarea><br>

        <label for="code">Code:</label>
        <textarea id="code" name="code"></textarea><br>

        <label for="language">Language:</label>
        <input type="text" id="language" name="language"><br>

        <button id="add-snippet-button">Add Snippet</button>
    </div>

    <h3>Snippets</h3>
    <div id="snippet-list">
        <!-- Snippets will be displayed here -->
    </div>

    <script src="index.js"></script>
</body>
</html>

Now, create an index.js file. This will handle the interactions with your HTML, and call the functions we created in the TypeScript file. Note: for simplicity this example uses inline javascript, but in a real-world scenario you would use a bundler like webpack or parcel to handle the javascript compilation.

// index.js

// This is a simplified example.  In a real app, you'd use a bundler and a build process.

// Assume the TypeScript code is available in the global scope (after the tsc command)
// You'll need to compile the TypeScript code to JavaScript and include it in your HTML
// before this script runs.

// (This is a simplified way to access the functions created in the TypeScript file.)

const addSnippetButton = document.getElementById('add-snippet-button');
const snippetList = document.getElementById('snippet-list');

// Function to render snippets in the UI
function renderSnippets() {
  snippetList.innerHTML = ''; // Clear existing snippets
  const snippets = getSnippets(); // Assuming getSnippets is available from your compiled TypeScript code

  snippets.forEach(snippet => {
    const snippetElement = document.createElement('div');
    snippetElement.innerHTML = `
      <h4>${snippet.title}</h4>
      <p>${snippet.description}</p>
      <pre><code>${snippet.code}</code></pre>
      <p>Language: ${snippet.language}</p>
      <button data-id="${snippet.id}" class="delete-button">Delete</button>
      <hr>
    `;
    snippetList.appendChild(snippetElement);

    // Add event listener for delete buttons
    const deleteButton = snippetElement.querySelector('.delete-button');
    if (deleteButton) {
      deleteButton.addEventListener('click', () => {
        const snippetId = deleteButton.dataset.id;
        if (snippetId) {
          deleteSnippet(snippetId); // Assuming deleteSnippet is available
          renderSnippets(); // Refresh the list
        }
      });
    }
  });
}

// Add snippet button click event
if (addSnippetButton) {
    addSnippetButton.addEventListener('click', () => {
        const title = document.getElementById('title').value;
        const description = document.getElementById('description').value;
        const code = document.getElementById('code').value;
        const language = document.getElementById('language').value;

        if (title && description && code && language) {
            addSnippet(title, description, code, language);
            renderSnippets();

            // Clear the form
            document.getElementById('title').value = '';
            document.getElementById('description').value = '';
            document.getElementById('code').value = '';
            document.getElementById('language').value = '';
        }
    });
}

// Initial render
renderSnippets();

Key points about the JavaScript code:

  • DOM Manipulation: The JavaScript code uses standard DOM (Document Object Model) manipulation to interact with the HTML elements.
  • Event Listeners: Event listeners are attached to the “Add Snippet” button and the delete buttons to handle user interactions.
  • Data Retrieval: The code retrieves snippet data from the (compiled) TypeScript code by calling the `getSnippets()` function.
  • Rendering: The `renderSnippets()` function dynamically generates HTML to display the snippets, including a delete button for each.
  • Delete Functionality: The delete buttons call the `deleteSnippet()` function from the (compiled) TypeScript code.

Important Steps for Running the UI Example:

  1. Compile TypeScript: Run tsc in your terminal to compile the TypeScript code. This will generate a index.js file (in the `dist` directory by default, if your tsconfig is configured that way).
  2. Include Compiled JavaScript: Make sure your index.html file includes the *compiled* JavaScript file. The example above assumes the compiled file is named index.js and it is in the same directory as the html file.
  3. Serve the HTML File: You can’t directly open the HTML file in your browser by double-clicking it, because of security restrictions. You need to serve it using a local web server. There are several ways to do this:
    • Using a Simple HTTP Server: If you have Python installed, you can use python -m http.server (Python 3) or python -m SimpleHTTPServer (Python 2) in your project directory. Then, open your browser and go to http://localhost:8000.
    • Using a Development Server (Recommended): Install a development server like live-server (npm install -g live-server). Then, run live-server in your project directory. This will automatically refresh the browser when you make changes to your code.
  4. Test: Open your browser and navigate to the URL provided by your web server (e.g., http://localhost:8000). You should see the form and be able to add, view, and delete snippets.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • TypeScript Compilation Errors: TypeScript will highlight errors during compilation. Always check the console output when you run tsc. Common errors include type mismatches, missing imports, and incorrect syntax. Carefully read the error messages and fix the code accordingly.
  • Incorrect File Paths: Double-check your file paths in your import statements and in your HTML <script> tags.
  • Incorrect HTML Element IDs: Make sure the IDs you use in your JavaScript code to select HTML elements (e.g., document.getElementById('title')) match the IDs in your HTML.
  • JavaScript Errors in the Browser Console: Use your browser’s developer tools (usually accessed by pressing F12) to check the console for JavaScript errors. These errors can often help you pinpoint problems with your UI logic.
  • Not Serving the HTML Correctly: Remember that you need to serve the HTML file using a local web server for the JavaScript to work correctly.
  • Forgetting to Compile TypeScript: Always run tsc to compile your TypeScript code before running the application. If you change your TypeScript code, you need to recompile it.
  • Incorrect Data Binding (if using a framework): If you’re using a framework like React, Angular, or Vue.js, make sure you understand how data binding works in that framework.

Enhancements and Next Steps

This is a basic example. Here are some ways to enhance your code snippet manager:

  • Persistent Storage: Implement a database (e.g., SQLite, PostgreSQL, or a cloud database like Firebase) to store snippets persistently.
  • User Authentication: Add user authentication to protect your snippets.
  • Search Functionality: Implement a more advanced search feature, including search by content.
  • Code Highlighting: Use a library like Prism.js or highlight.js to provide code highlighting in your UI.
  • Code Editor: Integrate a code editor (e.g., CodeMirror, Monaco Editor) for editing snippets directly in the UI.
  • Language Selection: Add a dropdown or other UI element to allow users to select the programming language for each snippet.
  • Import/Export: Allow users to import and export snippets from/to files (e.g., JSON, text files).
  • Tags/Categories: Add tags or categories to organize your snippets.
  • UI Framework: Use a UI framework like React, Angular, or Vue.js to build a more sophisticated and maintainable UI.
  • Error Handling: Implement robust error handling to gracefully handle unexpected situations.
  • Testing: Write unit tests and integration tests to ensure your code is working correctly.

Key Takeaways

  • TypeScript provides strong typing and helps catch errors early in the development process.
  • Using interfaces helps define the structure of your data.
  • Modularizing your code into functions makes it more organized and easier to maintain.
  • A basic UI can be created using HTML, JavaScript, and DOM manipulation.
  • Consider using a UI framework for more complex applications.

FAQ

  1. Can I use this code snippet manager in a production environment? The basic example provided is not production-ready. You’ll need to implement persistent storage, user authentication, and robust error handling. Also, consider using a framework for the frontend.
  2. What are the benefits of using TypeScript for this project? TypeScript provides static typing, which helps prevent runtime errors, improves code readability, and makes it easier to maintain your code.
  3. How can I deploy this application? You can deploy the application using a hosting service like Netlify, Vercel, or AWS. You’ll need to build your application (if you’re using a framework) and upload the necessary files.
  4. What are some good resources for learning more about TypeScript? The official TypeScript documentation is an excellent resource. You can also find many tutorials and courses on websites like freeCodeCamp, Udemy, and Coursera.

Building a code snippet manager is a great way to learn TypeScript and improve your productivity. By starting with a simple application and iteratively adding features, you can create a powerful tool that significantly enhances your coding workflow. Remember to break down the problem into smaller, manageable parts, test your code frequently, and don’t be afraid to experiment and learn from your mistakes. With a little effort, you can create a valuable tool that saves you time and improves your coding efficiency. Embrace the power of code reuse, and watch your development speed soar.

More posts