TypeScript Tutorial: Building a Simple Web-Based Poll Application

Written by

learnmodernjavascript

in

In today’s digital world, gathering opinions and feedback is crucial. Whether it’s for understanding customer preferences, gauging public sentiment, or simply for fun, online polls are an incredibly effective tool. They’re interactive, engaging, and provide instant insights. But how do you build one? This tutorial will guide you through creating a simple, yet functional, web-based poll application using TypeScript, a powerful superset of JavaScript that adds static typing.

Why TypeScript?

TypeScript offers several advantages over plain JavaScript, especially for larger projects. It catches errors early, improves code readability, and enhances developer productivity. Here’s why we’re using TypeScript:

  • Type Safety: TypeScript helps prevent runtime errors by checking the types of variables and function arguments during development.
  • Improved Code Readability: Types act as documentation, making it easier to understand the purpose of variables and functions.
  • Enhanced Developer Experience: Features like autocompletion and refactoring make coding more efficient.
  • Scalability: TypeScript facilitates the maintenance and growth of your application as it becomes more complex.

Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need the following:

  • Node.js and npm (Node Package Manager): These are essential for running JavaScript and managing project dependencies. Download and install them from nodejs.org.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support. You can download it from code.visualstudio.com.

Once you have Node.js and VS Code installed, let’s create a new project:

  1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your project. For example: mkdir poll-app
  2. Navigate to the Directory: cd poll-app
  3. Initialize npm: Run npm init -y. This creates a package.json file, which manages your project’s dependencies.
  4. Install TypeScript: Run npm install typescript --save-dev. The --save-dev flag indicates that this is a development dependency.
  5. Initialize TypeScript: Run npx tsc --init. This generates a tsconfig.json file, which configures the TypeScript compiler.

Project Structure

Let’s create a basic project structure:

poll-app/
├── src/
│   └── index.ts
├── tsconfig.json
└── package.json

The src directory will contain our TypeScript code, and index.ts will be our main file. The tsconfig.json file configures the TypeScript compiler, and package.json manages project dependencies.

Writing the TypeScript Code

Now, let’s write the core TypeScript code for our poll application. We’ll start with a simple poll interface and some basic functions.

Step 1: Define the Poll Interface

Create a file named src/index.ts and add the following code:

// src/index.ts

interface Poll {
  question: string;
  options: string[];
  votes: number[]; // Corresponding votes for each option
}

This interface defines the structure of our poll data. It includes a question, an array of options, and an array of votes (one vote count for each option).

Step 2: Initialize a Poll

Let’s create a sample poll. Add this code to src/index.ts:

// src/index.ts

const myPoll: Poll = {
  question: "What is your favorite programming language?",
  options: ["JavaScript", "TypeScript", "Python", "Java"],
  votes: [0, 0, 0, 0],
};

Here, we’ve initialized a poll with a question, options, and initial vote counts set to zero.

Step 3: Display the Poll

Let’s create a function to display the poll in the console. Add this code to src/index.ts:

// src/index.ts

function displayPoll(poll: Poll): void {
  console.log(poll.question);
  poll.options.forEach((option, index) => {
    console.log(`${index + 1}. ${option} - Votes: ${poll.votes[index]}`);
  });
}

This function takes a Poll object as input and displays the question and options with their vote counts in the console.

Step 4: Handle Voting

Now, let’s add a function to handle votes. Add this code to src/index.ts:

// src/index.ts

function castVote(poll: Poll, optionIndex: number): void {
  if (optionIndex >= 0 && optionIndex < poll.options.length) {
    poll.votes[optionIndex]++;
    console.log(`Voted for: ${poll.options[optionIndex]}`);
  } else {
    console.log("Invalid option.");
  }
}

This function takes the poll and the index of the selected option as input. It increments the vote count for the selected option.

Step 5: Run the Application

Finally, let’s call these functions to run our poll application. Add this code to the end of src/index.ts:

// src/index.ts

displayPoll(myPoll);
castVote(myPoll, 1);
displayPoll(myPoll);
castVote(myPoll, 0);
displayPoll(myPoll);

This code displays the initial poll, casts a vote for option 2 (TypeScript), displays the updated poll, casts another vote for option 1 (JavaScript), and displays the final poll.

Compiling and Running the Code

Now, let’s compile and run our TypeScript code:

  1. Compile the TypeScript Code: In your terminal, run npx tsc. This command compiles the TypeScript code in src/index.ts and generates a JavaScript file index.js in the same directory (or the directory specified in your tsconfig.json).
  2. Run the JavaScript Code: Run node src/index.js. This executes the compiled JavaScript code.

You should see the poll displayed in your console, along with the votes being cast and updated.

Adding a Basic User Interface (HTML & JavaScript)

While the console output is useful for testing, let’s create a basic HTML user interface to make our poll application more interactive. We’ll use HTML for the structure, CSS for styling (minimal), and JavaScript (compiled from our TypeScript) to handle user interactions.

Step 1: Create an HTML File

Create a file named index.html in the root directory of your project and add the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Poll App</title>
  <style>
    body {
      font-family: sans-serif;
    }
    .poll-container {
      margin: 20px;
      padding: 20px;
      border: 1px solid #ccc;
    }
    button {
      margin-top: 5px;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="poll-container">
    <h2 id="question"></h2>
    <div id="options"></div>
    <div id="results"></div>
  </div>
  <script src="src/index.js"></script>
</body>
</html>

This HTML provides a basic structure for our poll: a question, options, and results. It also includes a link to our compiled JavaScript file (src/index.js).

Step 2: Modify TypeScript Code for the UI

We need to modify our TypeScript code to interact with the HTML elements. Open src/index.ts and make the following changes:

// src/index.ts

interface Poll {
  question: string;
  options: string[];
  votes: number[];
}

const myPoll: Poll = {
  question: "What is your favorite programming language?",
  options: ["JavaScript", "TypeScript", "Python", "Java"],
  votes: [0, 0, 0, 0],
};

// Get HTML elements
const questionElement = document.getElementById('question') as HTMLHeadingElement | null;
const optionsElement = document.getElementById('options') as HTMLDivElement | null;
const resultsElement = document.getElementById('results') as HTMLDivElement | null;

function displayPoll(poll: Poll): void {
  if (!questionElement || !optionsElement || !resultsElement) {
    console.error('One or more HTML elements not found.');
    return;
  }

  questionElement.textContent = poll.question;
  optionsElement.innerHTML = '';
  resultsElement.innerHTML = '';

  poll.options.forEach((option, index) => {
    const button = document.createElement('button');
    button.textContent = option;
    button.addEventListener('click', () => {
      castVote(poll, index);
      updateResults(poll);
    });
    optionsElement.appendChild(button);
  });

  updateResults(poll);
}

function castVote(poll: Poll, optionIndex: number): void {
  if (optionIndex >= 0 && optionIndex  {
    const result = document.createElement('p');
    result.textContent = `${option}: ${poll.votes[index]} votes`;
    resultsElement.appendChild(result);
  });
}

// Initial display
displayPoll(myPoll);

Here’s what changed:

  • We added code to get the HTML elements (question, options, and results) using document.getElementById().
  • We modified the displayPoll() function to update the HTML elements with the poll question and options. It now creates buttons for each option and attaches click event listeners.
  • The castVote() function no longer logs to the console, as the UI handles the feedback.
  • We added a new function, updateResults(), to display the vote counts in the results section.
  • We call displayPoll(myPoll) at the end to initialize the UI.

Step 3: Recompile and Run

After making these changes, recompile your TypeScript code using npx tsc and open index.html in your web browser. You should see the poll question and options displayed, and when you click the options, the results should update dynamically.

Advanced Features and Enhancements

This is a basic poll application. Here are some ideas to enhance it:

  • Data Persistence: Store poll data in local storage, a database (like Firebase or MongoDB), or use cookies to save the votes even after the browser is closed.
  • More Complex Polls: Allow users to create polls with multiple-choice questions, text input, and different question types.
  • User Authentication: Add user authentication to allow users to create, manage, and vote on polls.
  • Real-time Updates: Use WebSockets to update the poll results in real-time as users vote.
  • Styling: Improve the user interface with CSS frameworks like Bootstrap or Tailwind CSS.
  • Error Handling: Implement more robust error handling to deal with potential issues such as invalid input or network errors.
  • Accessibility: Ensure the application is accessible to users with disabilities by using ARIA attributes and following accessibility guidelines.
  • Testing: Write unit tests to ensure the functionality of your application.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when working with TypeScript and web development, along with solutions:

  • Incorrect Type Definitions: Using the wrong types can lead to unexpected behavior. Carefully define your types to match the data you’re working with. Use interfaces and types effectively.
  • Ignoring Compiler Errors: The TypeScript compiler is your friend! Don’t ignore the errors it reports. They’re there to help you catch bugs early.
  • Not Using Type Annotations: While TypeScript can infer types, it’s good practice to explicitly annotate your variables and function parameters, especially when starting out. This improves readability and helps prevent errors.
  • Incorrect DOM Manipulation: Be careful when manipulating the DOM. Make sure you’re selecting the correct elements and updating them correctly. Use the browser’s developer tools to inspect the elements and debug any issues.
  • Forgetting to Compile: Always remember to compile your TypeScript code before running your application.
  • Not Handling Null or Undefined: In JavaScript, variables can be null or undefined. Use type guards (e.g., if (element) { ... }) to prevent errors when accessing properties of potentially null or undefined values.
  • Mixing JavaScript and TypeScript: While you can use JavaScript code in your TypeScript project, try to write as much as possible in TypeScript to take advantage of its benefits.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned the basics of TypeScript, including interfaces, types, and functions.
  • Web Development: You’ve built a simple web application with HTML, CSS, and JavaScript, demonstrating how to interact with the DOM.
  • Project Structure: You’ve learned how to organize a TypeScript project.
  • Debugging: You’ve learned how to debug and fix common errors.
  • Extensibility: You’ve learned how to add more features.

FAQ

Q: What is TypeScript?
A: TypeScript is a superset of JavaScript that adds static typing. It helps catch errors early, improves code readability, and enhances developer productivity.

Q: Why should I use TypeScript?
A: TypeScript offers type safety, improved code readability, a better developer experience, and scalability, making it ideal for larger and more complex projects.

Q: How do I compile TypeScript code?
A: You compile TypeScript code using the TypeScript compiler (tsc). You typically run npx tsc in your terminal.

Q: How do I handle DOM manipulation in TypeScript?
A: You can use the standard DOM methods like document.getElementById(), document.createElement(), and element.textContent to manipulate HTML elements. Remember to use type assertions (e.g., as HTMLHeadingElement) to specify the type of the elements you’re working with.

Q: How can I add more features to my poll application?
A: You can add features like data persistence, user authentication, real-time updates, and more complex poll types. Consider using a database, implementing user interfaces, and exploring advanced JavaScript concepts like WebSockets.

Building a web-based poll application with TypeScript is a great way to learn the fundamentals of both TypeScript and web development. This tutorial has provided a solid foundation, and you can now expand on this by adding more features and functionalities. The ability to gather and analyze data is a critical skill in today’s world, and this project equips you with the tools to do so effectively. Remember to practice, experiment, and don’t be afraid to try new things. The more you code, the better you’ll become. By starting with a simple project, you’ve taken the first step toward mastering TypeScript and creating powerful web applications. The possibilities are vast, and your journey has just begun. Keep coding, keep learning, and keep building.

More posts