TypeScript Tutorial: Building a Simple Interactive Blog Post with Comments

Written by

learnmodernjavascript

in

In today’s digital landscape, blogs are the backbone of online information sharing, and interactivity is key to keeping readers engaged. One of the most common and crucial features of any blog is a comment section. In this tutorial, we’ll dive into building a simple, yet functional, interactive blog post with a comment section using TypeScript. We’ll cover everything from setting up the basic structure to handling user input and displaying comments. This project is a fantastic way to learn about front-end development, data handling, and the power of TypeScript.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to your code. This means you can catch errors earlier, improve code readability, and make your projects more maintainable. For beginners, it might seem like an extra layer of complexity, but the benefits in the long run are significant. TypeScript helps you write cleaner, more robust code, making it easier to scale your project and collaborate with others.

Project Setup

Let’s start by setting up our project. We’ll use Node.js and npm (Node Package Manager) to manage our dependencies and build our application. If you don’t have Node.js and npm installed, download them from the official website: https://nodejs.org/.

  1. Create a new project directory: mkdir blog-with-comments
  2. Navigate into the directory: cd blog-with-comments
  3. Initialize a new npm project: npm init -y
  4. Install TypeScript: npm install typescript --save-dev
  5. Create a tsconfig.json file by running: npx tsc --init. This file configures the TypeScript compiler.
  6. Create a directory for your source code: mkdir src
  7. Create an index.ts file inside the src directory: touch src/index.ts

Your project structure should now look something like this:

blog-with-comments/
├── node_modules/
├── package.json
├── package-lock.json
├── src/
│   └── index.ts
├── tsconfig.json
└──

Writing the HTML Structure

We’ll create a basic HTML structure to hold our blog post and comment section. This will be a simple `index.html` file that we’ll serve from a web server (we’ll set this up later). Create an index.html file in the root directory and add the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post with Comments</title>
</head>
<body>
    <div id="blog-post">
        <h1>My Awesome Blog Post</h1>
        <p>This is the content of my blog post. It's really interesting!</p>
    </div>

    <div id="comments">
        <h2>Comments</h2>
        <div id="comment-list">
            <!-- Comments will be displayed here -->
        </div>
        <div id="comment-form">
            <textarea id="comment-input" placeholder="Add a comment..."></textarea>
            <button id="comment-submit">Post Comment</button>
        </div>
    </div>

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

This HTML provides the basic structure for the blog post, the comments section, a text area for new comments, a submit button, and a script tag to include our JavaScript (which will be generated from our TypeScript code).

Writing the TypeScript Code

Now, let’s write the TypeScript code that will handle the comments. Open src/index.ts and start by defining some interfaces to represent our data:

interface Comment {
    author: string;
    text: string;
    timestamp: number;
}

This interface defines the structure of a comment object. It includes the author’s name, the comment text, and a timestamp. Next, we will create the functions to add comments, display comments, and handle user input.

interface Comment {
    author: string;
    text: string;
    timestamp: number;
}

// Mock data for initial comments
const initialComments: Comment[] = [
    { author: "User1", text: "Great post!", timestamp: Date.now() - 60000 },
    { author: "User2", text: "I learned a lot.", timestamp: Date.now() - 30000 },
];

// Get references to HTML elements
const commentList = document.getElementById('comment-list') as HTMLDivElement | null;
const commentInput = document.getElementById('comment-input') as HTMLTextAreaElement | null;
const commentSubmit = document.getElementById('comment-submit') as HTMLButtonElement | null;

// Function to display comments
function displayComments(comments: Comment[]): void {
    if (!commentList) return;
    commentList.innerHTML = ''; // Clear existing comments

    comments.forEach(comment => {
        const commentElement = document.createElement('div');
        commentElement.classList.add('comment');
        commentElement.innerHTML = `<p><strong>${comment.author}:</strong> ${comment.text}</p>`;
        commentList.appendChild(commentElement);
    });
}

// Function to add a comment
function addComment(author: string, text: string): void {
    const newComment: Comment = {
        author: author,
        text: text,
        timestamp: Date.now(),
    };

    // Simulate saving the comment (e.g., to local storage or a server)
    initialComments.push(newComment);
    displayComments(initialComments);
}

// Event listener for the submit button
if (commentSubmit && commentInput) {
    commentSubmit.addEventListener('click', () => {
        const commentText = commentInput.value;
        if (commentText) {
            addComment('Guest', commentText);
            commentInput.value = ''; // Clear the input field
        }
    });
}

// Initial display of comments
displayComments(initialComments);

Let’s break down the code:

  • Interfaces: The Comment interface defines the structure of a comment object.
  • Mock Data: We have included mock data for the initial comments.
  • HTML Element References: We get references to the HTML elements we’ll be interacting with (comment list, input field, and submit button).
  • displayComments Function: This function takes an array of comments and dynamically creates HTML elements to display them in the comment list. It clears the existing comments and then iterates through the comments, creating a div for each one.
  • addComment Function: This function creates a new comment object, adds it to our (simulated) data store, and then calls displayComments to update the display.
  • Event Listener: An event listener is attached to the submit button. When clicked, it retrieves the text from the comment input, calls addComment, and clears the input field.
  • Initial Display: Finally, we call displayComments to display the initial comments when the page loads.

Compiling and Serving

Now that we have our TypeScript code, we need to compile it into JavaScript that the browser can understand. We’ll also need a simple web server to serve our HTML and JavaScript files.

  1. Compile TypeScript: Open your terminal and run tsc. This will use the settings in your tsconfig.json file to compile src/index.ts into index.js (or whatever you configure in your tsconfig.json).
  2. Install a Web Server: We’ll use the serve package, which is a simple static web server. Install it globally: npm install -g serve.
  3. Serve the Files: Navigate to your project directory in the terminal and run serve. This will start a web server and you can view the application in your browser at the address provided by serve (usually http://localhost:5000 or similar).

Open your browser and navigate to the address provided by serve. You should see your blog post with the comment section. You should be able to type comments and submit them, and they should appear on the page. Remember, this is a basic implementation; the comments are not persisted (they will disappear when you refresh the page).

Adding Styling (CSS)

To make the blog post look more appealing, let’s add some basic CSS. Create a file named style.css in the root directory and add the following CSS rules:

body {
    font-family: sans-serif;
    margin: 20px;
}

#blog-post {
    margin-bottom: 20px;
}

.comment {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

#comment-form {
    margin-top: 10px;
}

#comment-input {
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    box-sizing: border-box;
}

#comment-submit {
    padding: 8px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

Link the CSS file in your index.html file within the <head> section:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post with Comments</title>
    <link rel="stylesheet" href="style.css">
</head>

Now, when you refresh your page, you should see the blog post and comments styled with the CSS rules.

Handling User Input and Validation

Currently, anyone can post a comment without providing a name. Let’s make a small change to add some basic user input. We can add a name field to the comment form.

Modify your index.html file’s comment form section to include an input field for the author’s name:

<div id="comment-form">
    <input type="text" id="author-input" placeholder="Your Name"><br>
    <textarea id="comment-input" placeholder="Add a comment..."></textarea>
    <button id="comment-submit">Post Comment</button>
</div>

Next, modify your src/index.ts file to handle the author’s name input:

interface Comment {
    author: string;
    text: string;
    timestamp: number;
}

// Mock data for initial comments
const initialComments: Comment[] = [
    { author: "User1", text: "Great post!", timestamp: Date.now() - 60000 },
    { author: "User2", text: "I learned a lot.", timestamp: Date.now() - 30000 },
];

// Get references to HTML elements
const commentList = document.getElementById('comment-list') as HTMLDivElement | null;
const commentInput = document.getElementById('comment-input') as HTMLTextAreaElement | null;
const commentSubmit = document.getElementById('comment-submit') as HTMLButtonElement | null;
const authorInput = document.getElementById('author-input') as HTMLInputElement | null;

// Function to display comments
function displayComments(comments: Comment[]): void {
    if (!commentList) return;
    commentList.innerHTML = ''; // Clear existing comments

    comments.forEach(comment => {
        const commentElement = document.createElement('div');
        commentElement.classList.add('comment');
        commentElement.innerHTML = `<p><strong>${comment.author}:</strong> ${comment.text}</p>`;
        commentList.appendChild(commentElement);
    });
}

// Function to add a comment
function addComment(author: string, text: string): void {
    if (!author || !text) {
        alert('Please enter both your name and comment.'); // Basic validation
        return;
    }
    const newComment: Comment = {
        author: author,
        text: text,
        timestamp: Date.now(),
    };

    // Simulate saving the comment (e.g., to local storage or a server)
    initialComments.push(newComment);
    displayComments(initialComments);
}

// Event listener for the submit button
if (commentSubmit && commentInput && authorInput) {
    commentSubmit.addEventListener('click', () => {
        const author = authorInput.value;
        const commentText = commentInput.value;

        if (commentText) {
            addComment(author, commentText);
            commentInput.value = ''; // Clear the input field
            authorInput.value = '';
        }
    });
}

// Initial display of comments
displayComments(initialComments);

Here’s what changed:

  • Added author input field: Added an input field in the HTML to capture the author’s name.
  • Get Reference: Added a reference to the author input element.
  • Basic Validation: The addComment function now checks if both the author and comment text are provided. If not, it shows an alert. This is a very basic form of validation.
  • Updated event listener: The event listener now reads the author’s name from the input field and passes it to the addComment function.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a blog post with comments in TypeScript:

  • Incorrect TypeScript Configuration: If you’re encountering errors during compilation, double-check your tsconfig.json file. Make sure the target is set to a version of JavaScript supported by your target browsers (e.g., "es5" or "es2015"). Also, ensure that "module" is set to a module system like "commonjs" or "esnext".
  • Type Errors: TypeScript’s type checking can be a lifesaver, but it can also be a source of frustration. When you see type errors, carefully read the error messages. They usually provide hints about what’s wrong. Common issues include incorrect types being assigned to variables, or trying to access properties that don’t exist on a particular object.
  • DOM Element Access: When working with the DOM, make sure you’re properly casting your elements to the correct types (e.g., using as HTMLDivElement). If you don’t cast, you might not be able to access the properties and methods you expect. Also, double-check that the element actually exists in the DOM before you try to access it. Use the null check like we did.
  • Event Listener Issues: If your event listeners aren’t firing, make sure you’ve correctly attached them to the right elements. Also, ensure that the elements exist in the DOM when the script runs. Sometimes, if the script is placed in the <head> of the HTML, the elements in the <body> might not have loaded yet. Place the <script> tag at the end of the <body> to avoid this.
  • Incorrect Paths: Double-check the paths to your files (HTML, CSS, JavaScript) in your HTML and TypeScript files. A simple typo can prevent your application from working.

Key Takeaways

  • TypeScript Enhances Code Quality: TypeScript significantly improves code quality, readability, and maintainability by introducing static typing.
  • Clear Separation of Concerns: Separating your HTML structure, CSS styling, and TypeScript logic makes your code more organized and easier to understand.
  • User Input and Validation are Important: Always validate user input to prevent unexpected behavior and improve the user experience.
  • Basic Web Server is Essential: Using a web server like serve is a fundamental part of web development. It allows you to test your application locally.
  • Iterate and Improve: Web development is an iterative process. Start with a basic version and incrementally add features and improvements.

FAQ

  1. How can I store comments permanently?

    The current implementation stores comments in memory (in the initialComments array). To store comments permanently, you would need to use a database (like SQLite, PostgreSQL, or MongoDB) or a service like Local Storage, or IndexedDB in the browser or a backend service. When a user submits a comment, you would send the comment data to your backend, which would then save it to the database. The comments would be retrieved from the database when the page loads.

  2. How do I handle errors?

    Error handling is essential for any application. In the current example, a basic validation is implemented. You can improve this by using try/catch blocks, displaying error messages to the user, and logging errors to the console or a server-side logging service. Consider using a more robust validation library. For example, if you are sending data to a server, you should handle network errors (e.g. server down, or invalid response) and display appropriate messages to the user.

  3. How can I deploy this blog post?

    To deploy your blog post, you’ll need a web server (like Apache, Nginx, or a cloud provider like AWS, Google Cloud, or Azure) and a domain name. You would upload your HTML, CSS, and JavaScript files to the web server. If you want to store comments permanently, you’ll also need a database on your server or a backend service to handle the data.

  4. Can I use a framework like React or Angular?

    Yes, you can certainly use frameworks like React, Angular, or Vue.js to build more complex and interactive blog posts. These frameworks provide more sophisticated ways to manage the user interface, handle data, and build reusable components. However, for a simple blog post with comments, the vanilla JavaScript and TypeScript approach is a good starting point, and it helps you understand the underlying principles before using a framework.

Building a simple blog post with comments is a great way to put your TypeScript skills to use. By following this tutorial, you’ve learned how to set up a TypeScript project, create an HTML structure, write TypeScript code to handle user input, and display comments. Remember to experiment, add features, and continue learning. The world of web development is constantly evolving, so keep exploring and expanding your knowledge.

More posts