TypeScript Tutorial: Building a Simple Interactive Web-Based Survey Application

Written by

learnmodernjavascript

in

Surveys are a cornerstone of gathering information, whether for market research, user feedback, or internal assessments. Building a web-based survey application from scratch might seem daunting, but with TypeScript, the process becomes significantly more manageable and enjoyable. This tutorial will guide you through creating a basic, interactive survey application, perfect for beginners and intermediate developers looking to enhance their TypeScript skills.

Why TypeScript for a Survey App?

TypeScript, a superset of JavaScript, brings static typing to the language. This offers numerous benefits when building applications, including:

  • Enhanced Code Readability: Types make your code easier to understand and maintain.
  • Early Error Detection: TypeScript catches errors during development, reducing runtime surprises.
  • Improved Developer Experience: Features like autocompletion and refactoring tools become more effective.
  • Scalability: TypeScript helps manage larger codebases more efficiently.

For a survey application, where data structures and user interactions are central, TypeScript’s strengths are particularly advantageous.

Setting Up Your Project

Before diving into the code, let’s set up the project environment. You’ll need Node.js and npm (Node Package Manager) installed. If you don’t have them, download and install them from the official Node.js website.

Create a new project directory and navigate into it:

mkdir survey-app
cd survey-app

Initialize a new npm project:

npm init -y

Install TypeScript:

npm install typescript --save-dev

Create a tsconfig.json file to configure TypeScript. You can generate a basic one using the TypeScript compiler:

npx tsc --init --rootDir src --outDir dist

This command creates a tsconfig.json file with default settings. Modify it to suit your needs. A good starting point is to set the `target` to `es5` or `es6` (depending on your browser support requirements), and `module` to `commonjs` or `esnext` (depending on your module system). Here’s an example:

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

Create a src directory and a file named index.ts inside it. This is where our TypeScript code will reside.

Defining Data Structures (Types)

A well-defined data structure is crucial for any application. Let’s define the types for our survey questions and responses. Open src/index.ts.

// Define the type for a single choice in a multiple-choice question
interface Choice {
  id: number;
  text: string;
}

// Define the type for a question
interface Question {
  id: number;
  text: string;
  type: 'text' | 'multipleChoice' | 'rating';  // Question types
  choices?: Choice[]; // Optional choices for multiple-choice questions
}

// Define the type for a survey response
interface Response {
  questionId: number;
  answer: string | number; // Answer can be text or a number (e.g., rating)
}

// Define the type for the entire survey
interface Survey {
  title: string;
  description: string;
  questions: Question[];
}

In this code:

  • Choice represents a single option in a multiple-choice question.
  • Question defines the structure of a question, including its type (text, multipleChoice, or rating). The `choices` property is optional and only used for multiple-choice questions.
  • Response captures a user’s answer to a question. The `answer` property can be a string (for text answers) or a number (for ratings).
  • Survey brings it all together, defining the overall structure of the survey.

Creating the Survey Data

Now, let’s create some sample survey data. This will be the questions and structure of our survey. Add this to your src/index.ts file:


// Sample survey data
const survey: Survey = {
  title: "Customer Satisfaction Survey",
  description: "Help us improve our services!",
  questions: [
    {
      id: 1,
      text: "How satisfied are you with our product?",
      type: "rating",
    },
    {
      id: 2,
      text: "What do you like most about our service?",
      type: "text",
    },
    {
      id: 3,
      text: "How likely are you to recommend us to a friend?",
      type: "rating",
    },
    {
      id: 4,
      text: "Which of the following features do you use most often?",
      type: "multipleChoice",
      choices: [
        { id: 1, text: "Feature A" },
        { id: 2, text: "Feature B" },
        { id: 3, text: "Feature C" },
      ],
    },
  ],
};

This is a basic survey with three different question types: rating, text, and multiple-choice. The `survey` variable now holds all the data for our survey.

Rendering the Survey in HTML

Next, we will generate the HTML to display the survey questions. We will use JavaScript to dynamically create the HTML elements.

Add the following function to your src/index.ts file:


// Function to render a single question
function renderQuestion(question: Question): string {
  let html = `<div class="question" data-question-id="${question.id}">n  <p>${question.text}</p>`;

  switch (question.type) {
    case 'text':
      html += `n    `;
      break;
    case 'multipleChoice':
      if (question.choices) {
        question.choices.forEach((choice) => {
          html += `n      <label> ${choice.text}</label>`;
        });
      }
      break;
    case 'rating':
      html += `n    `;
      break;
  }

  html += `n</div>`;
  return html;
}

// Function to render the survey
function renderSurvey(survey: Survey): string {
  let html = `<div class="survey">n  <h2>${survey.title}</h2>n  <p>${survey.description}</p>`;

  survey.questions.forEach((question) => {
    html += renderQuestion(question);
  });

  html += `n  <button id="submitButton">Submit</button>n</div>`;
  return html;
}

This code defines two key functions:

  • renderQuestion: Takes a Question object and generates the corresponding HTML for that question, based on its type.
  • renderSurvey: Takes a Survey object and generates the complete HTML for the entire survey, calling renderQuestion for each question.

Integrating with the DOM

Now, let’s render the survey into the HTML document. We’ll create a basic HTML file and then use JavaScript to insert the generated survey HTML into the page.

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>Survey App</title>
  <style>
    .question { margin-bottom: 1em; }
    label { display: block; margin-bottom: 0.5em; }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="dist/index.js"></script>
</body>
</html>

In your src/index.ts file, add the following code to render the survey into the DOM:


// Get the app div
const appElement = document.getElementById('app');

// Render the survey
if (appElement) {
  appElement.innerHTML = renderSurvey(survey);
}

This code gets the HTML element with the ID `app` and inserts the HTML generated by the renderSurvey function into it.

Handling User Input and Submission

The next step is to capture the user’s responses and handle the submission of the survey. Add the following code to src/index.ts:


// Function to get the answers from the form
function getAnswers(): Response[] {
  const responses: Response[] = [];

  survey.questions.forEach((question) => {
    const answerElement = document.getElementById(`answer-${question.id}`);

    if (answerElement) {
      let answerValue: string | number = '';

      switch (question.type) {
        case 'text':
          answerValue = (answerElement as HTMLInputElement).value;
          break;
        case 'multipleChoice':
          const selectedRadio = document.querySelector(`input[name="question-${question.id}"]:checked`) as HTMLInputElement | null;
          answerValue = selectedRadio?.value || '';
          break;
        case 'rating':
          answerValue = parseInt((answerElement as HTMLInputElement).value, 10);
          break;
      }

      if (answerValue) {
        responses.push({ questionId: question.id, answer: answerValue });
      }
    }
  });

  return responses;
}

// Function to handle the submit button click
function handleSubmit() {
  const answers = getAnswers();
  console.log(answers); // For now, just log the answers to the console
  alert('Survey submitted! Check the console for your answers.');
}

// Add event listener to the submit button
if (appElement) {
  const submitButton = document.getElementById('submitButton');
  if (submitButton) {
    submitButton.addEventListener('click', handleSubmit);
  }
}

This code does the following:

  • getAnswers: This function iterates through the questions and retrieves the user’s answers from the input fields. It handles different input types (text, radio buttons, and number inputs) and collects the responses into an array.
  • handleSubmit: This function is called when the submit button is clicked. It calls getAnswers to gather the responses and then logs the answers to the console. It also displays an alert to the user. In a real-world application, you would send the responses to a server.
  • Event Listener: The code adds an event listener to the submit button, calling the handleSubmit function when clicked.

Compiling and Running the Application

Now that we have written the code and created the HTML, let’s compile and run the application. From your terminal, run the following commands:

tsc

This command compiles your TypeScript code into JavaScript and places the output in the `dist` directory. Open index.html in your web browser. You should see your survey rendered. Fill out the survey and click the submit button. You should see the answers logged in your browser’s console.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect TypeScript Configuration: Double-check your tsconfig.json file. Ensure the `target` and `module` options are set correctly, and that the `rootDir` and `outDir` point to the correct source and output directories.
  • Missing or Incorrect HTML Element IDs: Ensure that the HTML elements you are trying to access in your TypeScript code (e.g., input fields, the app div) have the correct IDs.
  • Type Mismatches: TypeScript’s type checking can prevent errors. If you’re getting type errors, carefully review your variable types and ensure they match the expected types. Use type annotations to specify the expected types.
  • Incorrect Event Handling: Make sure you are attaching event listeners correctly and that the event handler functions are defined properly.
  • Not Compiling TypeScript: Always remember to run `tsc` to compile your TypeScript code before running your application.

Enhancements and Next Steps

This is a basic survey application. Here are some ideas for enhancements:

  • Server-Side Integration: Send the survey responses to a server (e.g., using a REST API) to store the data in a database.
  • More Question Types: Add support for more question types, such as dropdowns, checkboxes, and date pickers.
  • Validation: Implement input validation to ensure users provide valid answers.
  • Styling: Add CSS to style the survey and make it visually appealing.
  • User Interface (UI) Library: Consider using a UI library like React, Angular, or Vue.js for a more complex and feature-rich application.
  • Error Handling: Implement robust error handling to handle potential issues, such as network errors or invalid user input.
  • Progress Indicators: Show a progress indicator to the user to indicate how far along they are in the survey.

Key Takeaways

  • TypeScript enhances code quality and maintainability by adding static typing.
  • Defining data structures (types) is crucial for organizing your code.
  • Dynamically generating HTML using JavaScript is a common pattern for web applications.
  • Handling user input and event listeners allows you to create interactive applications.
  • Always remember to compile your TypeScript code before running your application.

FAQ

Q: What is TypeScript?

A: TypeScript is a superset of JavaScript that adds static typing. It helps catch errors early in development and makes your code more readable and maintainable.

Q: Why should I use TypeScript for a survey application?

A: TypeScript’s type safety and features like autocompletion are particularly beneficial for applications like surveys, where data structures and user interactions are central.

Q: How do I compile TypeScript code?

A: You compile TypeScript code using the TypeScript compiler (tsc). You typically run this command from your terminal after configuring a tsconfig.json file.

Q: What are the different question types supported in this example?

A: The example supports text input, multiple-choice questions (using radio buttons), and rating scales (using number input).

Q: How can I send the survey responses to a server?

A: You can use the fetch API or libraries like Axios to send the responses to a server. You’ll need a backend (e.g., Node.js with Express, Python with Django) to handle the incoming data.

Building a web-based survey application with TypeScript is a great way to learn about the language and create something useful. The structured approach and type safety of TypeScript make the development process much smoother. By starting with the basics of data structures, rendering HTML, and handling user input, you’ve taken the first steps toward creating a more complex and feature-rich application. Remember that building a survey application is not just about the code; it’s about understanding the data you want to collect and the best way to present it. With the foundation laid out in this tutorial, you can now explore more advanced features, experiment with different question types, and integrate with a backend to build a fully functional survey platform. The possibilities are extensive, and with TypeScript, you have a solid foundation for your project.

More posts