TypeScript Tutorial: Creating a Simple Web-Based Unit Converter

Written by

learnmodernjavascript

in

In the world of software development, converting units is a common task. Whether you’re building an application for scientific calculations, e-commerce, or even just a simple utility tool, the ability to seamlessly convert between different units of measurement is often a necessity. This tutorial will guide you through creating a simple, yet functional, web-based unit converter using TypeScript. We’ll break down the concepts into easily digestible chunks, providing clear explanations, practical examples, and well-formatted code to help you master the fundamentals.

Why Build a Unit Converter?

Creating a unit converter offers several benefits for both learning and practical application:

  • Practical Skill Development: It allows you to practice fundamental programming concepts like variables, data types, functions, conditional statements, and user interface interaction.
  • Real-World Relevance: Unit conversion is a ubiquitous task. Understanding how to build a converter equips you with a versatile skill applicable in various projects.
  • Foundation for More Complex Projects: The knowledge gained can be applied to build more complex applications involving calculations, data processing, and user input validation.
  • Learning TypeScript: This tutorial focuses on TypeScript, helping you understand how to use types, interfaces, and other TypeScript features.

Project Setup

Before we start coding, let’s set up our project. We’ll use a simple HTML file, a TypeScript file, and a way to compile the TypeScript code into JavaScript. Here’s a step-by-step guide:

  1. Create a Project Folder: Create a new folder for your project, e.g., “unit-converter”.
  2. Initialize npm: Open your terminal, navigate to your project folder, and run npm init -y. This creates a package.json file, which manages your project dependencies.
  3. Install TypeScript: Install TypeScript as a development dependency by running npm install --save-dev typescript.
  4. Create Configuration File: Create a tsconfig.json file in your project root. This file configures the TypeScript compiler. You can generate a basic one by running npx tsc --init. You can customize this file to suit your project’s needs. For our project, a basic configuration will suffice:
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
  1. Create HTML File: Create an index.html file in your project folder. This file will contain the user interface for our unit converter.
  2. Create TypeScript File: Create a src/converter.ts file. This is where we’ll write our TypeScript code.
  3. Compile TypeScript: Open your terminal in the project directory and run npx tsc. This command compiles your TypeScript code (.ts files) into JavaScript (.js files) and places the output in the dist folder (as defined in tsconfig.json).

Building the User Interface (index.html)

Our HTML file will provide the structure for our unit converter. We’ll keep it simple, including input fields for the value to convert, the starting unit, the target unit, and a display area for the result. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unit Converter</title>
</head>
<body>
  <h1>Unit Converter</h1>

  <label for="inputValue">Enter Value:</label>
  <input type="number" id="inputValue">
  <br><br>

  <label for="fromUnit">From:</label>
  <select id="fromUnit">
    <option value="meters">Meters</option>
    <option value="feet">Feet</option>
    <option value="yards">Yards</option>
  </select>
  <br><br>

  <label for="toUnit">To:</label>
  <select id="toUnit">
    <option value="meters">Meters</option>
    <option value="feet">Feet</option>
    <option value="yards">Yards</option>
  </select>
  <br><br>

  <button id="convertButton">Convert</button>
  <br><br>

  <p id="result"></p>

  <script src="./dist/converter.js"></script>
</body>
</html>

Explanation:

  • Input Field (<input type="number" id="inputValue">): Allows the user to enter the value to be converted.
  • Dropdowns (<select id="fromUnit"> and <select id="toUnit">): Allow the user to select the units for conversion.
  • Button (<button id="convertButton">): Triggers the conversion when clicked.
  • Result Paragraph (<p id="result">): Displays the converted value.
  • Script Tag (<script src="./dist/converter.js"></script>): Links our compiled JavaScript file (generated from our TypeScript code) to the HTML.

Writing the TypeScript Code (src/converter.ts)

Now, let’s write the TypeScript code that will handle the unit conversion logic and interact with the HTML elements. We’ll break this down into smaller, manageable parts.

1. Define Conversion Rates

First, we’ll define the conversion rates. This makes our code more organized and easier to modify if needed. We’ll create an object that stores the conversion factors between meters and other units.

const conversionRates: { [key: string]: number } = {
  metersToFeet: 3.28084,
  metersToYards: 1.09361,
  feetToMeters: 0.3048,
  yardsToMeters: 0.9144,
  feetToYards: 0.333333,
  yardsToFeet: 3
};

Explanation:

  • conversionRates: This is an object that stores the conversion rates.
  • { [key: string]: number }: This is a TypeScript type definition. It indicates that the conversionRates object will have string keys and number values. This is useful for type safety.
  • Conversion Factors: Each property represents a conversion factor (e.g., metersToFeet). The values are the corresponding conversion rates.

2. Create a Conversion Function

Next, we’ll create a function that performs the actual conversion. This function will take the input value, the source unit, and the target unit as arguments.

function convertUnits(value: number, fromUnit: string, toUnit: string): number | null {
  let result: number | null = null;

  if (isNaN(value)) {
    return null; // Handle invalid input
  }

  switch (fromUnit) {
    case "meters":
      if (toUnit === "feet") {
        result = value * conversionRates.metersToFeet;
      } else if (toUnit === "yards") {
        result = value * conversionRates.metersToYards;
      } else if (toUnit === "meters") {
        result = value;
      }
      break;
    case "feet":
      if (toUnit === "meters") {
        result = value * conversionRates.feetToMeters;
      } else if (toUnit === "yards") {
        result = value * conversionRates.feetToYards;
      } else if (toUnit === "feet") {
        result = value;
      }
      break;
    case "yards":
      if (toUnit === "meters") {
        result = value * conversionRates.yardsToMeters;
      } else if (toUnit === "feet") {
        result = value * conversionRates.yardsToFeet;
      } else if (toUnit === "yards") {
        result = value;
      }
      break;
    default:
      return null; // Handle invalid fromUnit
  }

  return result;
}

Explanation:

  • convertUnits(value: number, fromUnit: string, toUnit: string): number | null: This function takes three arguments:
    • value: number: The numerical value to convert.
    • fromUnit: string: The unit to convert from.
    • toUnit: string: The unit to convert to.
    • : number | null: The function returns a number (the converted value) or null if an error occurs (e.g., invalid input).
  • Error Handling: The function includes error handling for invalid input (e.g., non-numeric input) and invalid unit selections.
  • switch statement: The switch statement efficiently handles different conversion scenarios based on the fromUnit. Each case within the switch statement checks the value of the toUnit and performs the appropriate calculation.
  • Conversion Calculations: Inside each case, the conversion is performed using the conversionRates object.

3. Get HTML Elements

We’ll need to get references to the HTML elements so we can read the user’s input, display the result, and attach an event listener to the button.

const inputValueElement = document.getElementById('inputValue') as HTMLInputElement;
const fromUnitElement = document.getElementById('fromUnit') as HTMLSelectElement;
const toUnitElement = document.getElementById('toUnit') as HTMLSelectElement;
const convertButtonElement = document.getElementById('convertButton') as HTMLButtonElement;
const resultElement = document.getElementById('result') as HTMLParagraphElement;

Explanation:

  • document.getElementById(): This method retrieves an HTML element by its ID.
  • Type Assertions (as HTMLInputElement, etc.): We use type assertions to tell TypeScript the specific type of each element (e.g., an input element, a select element). This allows TypeScript to provide better type checking and code completion.

4. Add an Event Listener

We’ll attach an event listener to the “Convert” button. This listener will trigger the conversion process when the button is clicked.

convertButtonElement.addEventListener('click', () => {
  const inputValue = parseFloat(inputValueElement.value);
  const fromUnit = fromUnitElement.value;
  const toUnit = toUnitElement.value;

  const result = convertUnits(inputValue, fromUnit, toUnit);

  if (result !== null) {
    resultElement.textContent = result.toFixed(2) + " " + toUnit;
  } else {
    resultElement.textContent = "Invalid input or conversion.";
  }
});

Explanation:

  • addEventListener('click', () => { ... }): This adds an event listener that executes the provided function when the button is clicked.
  • Get Input Values: Inside the event listener, we retrieve the input value, the source unit, and the target unit from their respective HTML elements.
    • parseFloat(inputValueElement.value): Converts the input value (which is initially a string) to a floating-point number.
    • fromUnitElement.value and toUnitElement.value: Get the selected values from the dropdowns.
  • Call convertUnits(): The convertUnits() function is called to perform the conversion.
  • Display the Result: The converted result (if valid) is displayed in the result paragraph element. The toFixed(2) method formats the result to two decimal places. If the input is invalid, an error message is displayed.

5. Complete Code (converter.ts)

Here’s the complete converter.ts file, combining all the code snippets above:

const conversionRates: { [key: string]: number } = {
  metersToFeet: 3.28084,
  metersToYards: 1.09361,
  feetToMeters: 0.3048,
  yardsToMeters: 0.9144,
  feetToYards: 0.333333,
  yardsToFeet: 3
};

function convertUnits(value: number, fromUnit: string, toUnit: string): number | null {
  let result: number | null = null;

  if (isNaN(value)) {
    return null; // Handle invalid input
  }

  switch (fromUnit) {
    case "meters":
      if (toUnit === "feet") {
        result = value * conversionRates.metersToFeet;
      } else if (toUnit === "yards") {
        result = value * conversionRates.metersToYards;
      } else if (toUnit === "meters") {
        result = value;
      }
      break;
    case "feet":
      if (toUnit === "meters") {
        result = value * conversionRates.feetToMeters;
      } else if (toUnit === "yards") {
        result = value * conversionRates.feetToYards;
      } else if (toUnit === "feet") {
        result = value;
      }
      break;
    case "yards":
      if (toUnit === "meters") {
        result = value * conversionRates.yardsToMeters;
      } else if (toUnit === "feet") {
        result = value * conversionRates.yardsToFeet;
      } else if (toUnit === "yards") {
        result = value;
      }
      break;
    default:
      return null; // Handle invalid fromUnit
  }

  return result;
}

const inputValueElement = document.getElementById('inputValue') as HTMLInputElement;
const fromUnitElement = document.getElementById('fromUnit') as HTMLSelectElement;
const toUnitElement = document.getElementById('toUnit') as HTMLSelectElement;
const convertButtonElement = document.getElementById('convertButton') as HTMLButtonElement;
const resultElement = document.getElementById('result') as HTMLParagraphElement;

convertButtonElement.addEventListener('click', () => {
  const inputValue = parseFloat(inputValueElement.value);
  const fromUnit = fromUnitElement.value;
  const toUnit = toUnitElement.value;

  const result = convertUnits(inputValue, fromUnit, toUnit);

  if (result !== null) {
    resultElement.textContent = result.toFixed(2) + " " + toUnit;
  } else {
    resultElement.textContent = "Invalid input or conversion.";
  }
});

Running the Application

To run your unit converter:

  1. Save the HTML file (index.html) and the TypeScript file (src/converter.ts).
  2. Open your terminal and navigate to your project directory.
  3. Compile your TypeScript code by running npx tsc. This will create a dist folder with converter.js inside.
  4. Open index.html in your web browser.
  5. Enter a value, select the source and target units, and click the “Convert” button. The converted result should appear below the button.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a unit converter in TypeScript:

  • Incorrect HTML Element IDs: Make sure the IDs in your TypeScript code match the IDs in your HTML file. If they don’t match, you’ll get an error when trying to access the elements. Double-check for typos.
  • Type Errors: TypeScript’s type checking can help you catch errors early. Ensure that your variables are correctly typed and that you’re using the correct methods and properties for each element. Pay close attention to the console output for any type-related errors.
  • Incorrect Conversion Logic: Carefully review your conversion formulas and make sure they are correct. Test different values and unit combinations to verify the accuracy of your results.
  • Forgetting to Compile TypeScript: Remember to compile your TypeScript code (using npx tsc) after making changes. If you don’t compile, your changes won’t be reflected in the JavaScript file that the browser uses.
  • Input Validation Issues: Make sure you validate the user input to prevent unexpected behavior. For example, check if the input is a number before attempting to convert it. Use isNaN() to check if the input is a valid number.
  • Incorrect Unit Selection: Double-check that the values in your dropdowns (<select> elements) and your code that retrieves their values are aligned. Mismatches can lead to incorrect conversions.

Advanced Features (Beyond the Basics)

Once you’ve built the basic unit converter, you can extend it with these advanced features:

  • More Units: Add support for more units of measurement (e.g., temperature, weight, volume, time). This will involve adding more options to your dropdowns and expanding your conversion rate object and the convertUnits() function.
  • Unit Categories: Organize units into categories (e.g., Length, Weight, Temperature). This will improve the user interface and make it easier for users to find the units they need. You could use nested dropdowns or tabs for each category.
  • Error Handling: Implement more robust error handling to provide informative messages to the user. For instance, display an error message if the user enters non-numeric input or selects invalid units.
  • User Interface (UI) Enhancements: Improve the user interface with CSS for better styling and layout. Consider using a UI framework like Bootstrap or Tailwind CSS to speed up the styling process.
  • Unit Search: Implement a search feature to allow users to quickly find the units they need. You can use JavaScript to filter the dropdown options as the user types.
  • Local Storage: Save the user’s preferred units or last-used settings using local storage so the application remembers their preferences across sessions.
  • API Integration: Integrate with an API to fetch conversion rates dynamically. This ensures that your converter always uses the most up-to-date conversion factors, especially for currencies.

Key Takeaways

This tutorial provided a foundational understanding of building a simple unit converter with TypeScript. We covered the essential aspects of project setup, HTML structure, TypeScript code, and error handling. You learned how to define conversion rates, create a conversion function, interact with HTML elements, and handle user input. By understanding these core concepts, you’ve taken a significant step towards becoming proficient in TypeScript and web development.

FAQ

Here are some frequently asked questions about building a unit converter in TypeScript:

  1. How do I add support for different unit types (e.g., temperature, weight)?

    You’ll need to expand your conversionRates object to include the appropriate conversion factors for the new unit type. You’ll also need to add more options to your HTML dropdowns and update the convertUnits() function to handle the new unit types.

  2. How can I make the unit converter more user-friendly?

    Improve the user interface with CSS for better styling and layout. Consider using a UI framework. Organize units into categories. Add input validation and provide clear error messages. Implement a search feature to allow users to quickly find the units they need.

  3. How do I handle currency conversions?

    Currency conversions require up-to-date exchange rates. You can integrate with a currency conversion API (e.g., Open Exchange Rates) to fetch the latest rates dynamically. Then, use these rates in your conversion calculations.

  4. What are some common TypeScript errors I might encounter?

    Common errors include type mismatches (e.g., assigning a string to a number variable), incorrect HTML element IDs, and issues with the logic of your conversion calculations. Carefully review your code and the console output for error messages.

Building a unit converter is an excellent exercise for solidifying your understanding of TypeScript fundamentals. As you experiment and expand on this basic implementation, you’ll gain valuable experience in web development and improve your ability to build functional and user-friendly applications. The concepts we’ve covered – from defining types and handling user input to managing conversion rates and displaying results – are essential building blocks for a wide range of web projects. Embrace the opportunity to learn, experiment, and refine your coding skills, and you’ll find yourself well-equipped to tackle more complex challenges in the world of software development.

More posts