TypeScript Tutorial: Creating a Simple Interactive Unit Converter

Written by

learnmodernjavascript

in

In the digital age, we’re constantly bombarded with numbers – measurements, currencies, weights, and more. Converting these units is a common task, whether you’re planning a trip, baking a recipe, or analyzing data. Wouldn’t it be handy to have a simple, interactive tool to handle these conversions? This tutorial will guide you through building a unit converter using TypeScript, a powerful superset of JavaScript, making it easy to manage types and build robust applications. We’ll cover everything from the basics of TypeScript to creating an interactive user interface, all while keeping the code clear and easy to understand.

Why TypeScript for a Unit Converter?

TypeScript brings several advantages to the table, especially for projects of any size. For a unit converter, these benefits are particularly noticeable:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process. You’ll avoid many runtime errors related to incorrect data types.
  • Code Readability and Maintainability: TypeScript enhances code readability by providing type annotations, making it easier to understand the purpose of variables and functions.
  • Improved Developer Experience: With features like autocompletion and refactoring support, TypeScript boosts developer productivity.
  • Scalability: As your unit converter grows, TypeScript’s structure helps you manage complexity more effectively.

This tutorial is designed for developers with some basic knowledge of JavaScript. If you’re new to TypeScript, don’t worry! We’ll explain the key concepts as we go.

Setting Up Your TypeScript Project

Before we dive into the code, let’s set up our development environment. We’ll need Node.js and npm (Node Package Manager) installed on your machine. If you don’t have them, download and install them from the official Node.js website. Once you have Node.js and npm, follow these steps:

  1. Create a Project Directory: Create a new directory for your project. For example, you can name it unit-converter.
  2. Initialize npm: Open your terminal, navigate to your project directory, and run the command npm init -y. This creates a package.json file, which manages your project’s dependencies and configurations.
  3. Install TypeScript: Install TypeScript as a development dependency using the command npm install --save-dev typescript.
  4. Initialize TypeScript Configuration: Create a tsconfig.json file by running npx tsc --init. This file configures the TypeScript compiler.
  5. Configure tsconfig.json: Open tsconfig.json and make the following adjustments (or ensure these are set):
{
  "compilerOptions": {
    "target": "ES5", // Or a higher version like ES6 or ES2015
    "module": "commonjs",
    "outDir": "./dist", // Where compiled JavaScript files will be placed
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

These settings specify the target JavaScript version, the module system, the output directory, and enable strict type checking.

  1. Create Source Files: Create a directory named src in your project directory. This is where your TypeScript code will reside. Create a file named index.ts inside the src directory.

Your project structure should now look something like this:


unit-converter/
├── node_modules/
├── package.json
├── tsconfig.json
└── src/
    └── index.ts

Writing the TypeScript Code

Now, let’s write the code for our unit converter. We’ll start by defining the different unit conversions we want to support. For simplicity, we’ll focus on length conversions (meters, centimeters, and inches), but you can easily extend this to other types of units.

Defining Unit Conversion Logic

Inside src/index.ts, let’s start by defining some constants and a function to handle the conversions. We’ll use a type to represent the units and a function to convert between them.


// Define a type for units
type Unit = 'meter' | 'centimeter' | 'inch';

// Conversion factors (1 meter = X centimeters, 1 meter = Y inches)
const meterToCentimeter = 100;
const meterToInch = 39.37;

/**
 * Converts a value from one unit to another.
 * @param value The value to convert.
 * @param fromUnit The unit to convert from.
 * @param toUnit The unit to convert to.
 * @returns The converted value, or null if the units are incompatible.
 */
function convert(value: number, fromUnit: Unit, toUnit: Unit): number | null {
  if (fromUnit === toUnit) {
    return value;
  }

  let valueInMeters: number;

  switch (fromUnit) {
    case 'centimeter':
      valueInMeters = value / meterToCentimeter;
      break;
    case 'inch':
      valueInMeters = value / meterToInch;
      break;
    default:
      valueInMeters = value; // Already in meters
  }

  switch (toUnit) {
    case 'centimeter':
      return valueInMeters * meterToCentimeter;
    case 'inch':
      return valueInMeters * meterToInch;
    default:
      return valueInMeters; // Return in meters
  }
}

Let’s break down this code:

  • Unit type: We define a type Unit using a union of string literals. This enforces that the unit values can only be ‘meter’, ‘centimeter’, or ‘inch’. This helps prevent errors related to incorrect unit names.
  • Conversion Factors: We define constants for the conversion factors. This makes the code more readable and easier to maintain.
  • convert function: This function takes the value, the ‘from’ unit, and the ‘to’ unit as arguments. It first converts the value to meters, and then converts the value from meters to the target unit.

Building the User Interface (UI) in HTML

Now, let’s create a simple HTML file to provide a user interface for our unit converter. Create an index.html file in the root directory of your project (alongside your package.json and tsconfig.json files). This file will contain the form elements for the user to input values, select units, and display the converted result.





    
    
    <title>Unit Converter</title>
    
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
        }

        .converter-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="number"], select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            background-color: #3e8e41;
        }

        #result {
            margin-top: 10px;
            font-weight: bold;
        }
    


    <div class="converter-container">
        <h2>Unit Converter</h2>
        <label for="inputValue">Value:</label>
        

        <label for="fromUnit">From:</label>
        
            Meter
            Centimeter
            Inch
        

        <label for="toUnit">To:</label>
        
            Meter
            Centimeter
            Inch
        

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

        <div id="result"></div>
    </div>

In this HTML:

  • We have input fields for the value and dropdowns for the ‘from’ and ‘to’ units.
  • A button triggers the conversion.
  • A div with the id “result” will display the converted value.
  • We link to the compiled JavaScript file (dist/index.js).

Connecting UI with TypeScript

Now, let’s write the JavaScript code (in our src/index.ts file) to interact with the HTML elements and perform the conversions.


// Get references to HTML elements
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 HTMLDivElement;

// Event listener for the convert button
convertButtonElement?.addEventListener('click', () => {
  // Get values from the input fields
  const inputValue = parseFloat(inputValueElement.value);
  const fromUnit = fromUnitElement.value as Unit;
  const toUnit = toUnitElement.value as Unit;

  // Validate input
  if (isNaN(inputValue)) {
    resultElement.textContent = 'Please enter a valid number.';
    return;
  }

  // Perform the conversion
  const convertedValue = convert(inputValue, fromUnit, toUnit);

  // Display the result
  if (convertedValue !== null) {
    resultElement.textContent = `Result: ${convertedValue.toFixed(2)} ${toUnit}(s)`;
  } else {
    resultElement.textContent = 'Conversion not supported.';
  }
});

Here’s what the TypeScript code does:

  • Element References: We get references to the HTML input and select elements using their IDs. The as keyword is used to cast these elements to their respective types (HTMLInputElement, HTMLSelectElement, HTMLButtonElement, and HTMLDivElement). This allows TypeScript to provide type checking and autocompletion when working with these elements. The use of the optional chaining operator (?.) ensures that the code does not throw an error if an element is not found.
  • Event Listener: An event listener is added to the convert button. When the button is clicked, the function inside the listener is executed.
  • Input Retrieval: Inside the event listener, the values from the input fields and select elements are retrieved. parseFloat is used to convert the input value (which is a string) to a number.
  • Input Validation: The code checks if the input value is a valid number using isNaN(). If the input is not a number, an error message is displayed in the result element.
  • Conversion: The convert() function is called with the input value, ‘from’ unit, and ‘to’ unit.
  • Result Display: The converted value is displayed in the result element, formatted to two decimal places using toFixed(2). If the conversion is not supported (convert() returns null), an appropriate message is displayed.

Compiling and Running the Application

Now that we have both the TypeScript code and the HTML, we need to compile the TypeScript code into JavaScript and then run the application.

  1. Compile the TypeScript: In your terminal, run the command npx tsc. This will use the TypeScript compiler (tsc) to compile the src/index.ts file into dist/index.js. The compiled JavaScript code will be placed in the dist directory as specified in tsconfig.json.
  2. Open the HTML File: Open the index.html file in your web browser. You can do this by double-clicking the file or by right-clicking and selecting “Open with” your preferred browser.
  3. Test the Converter: Enter a value, select the ‘from’ and ‘to’ units, and click the “Convert” button. The converted value should be displayed below.

If everything is set up correctly, you should now have a working unit converter!

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect File Paths: Double-check that the file paths in your HTML file (e.g., the path to index.js) are correct. A common mistake is using the wrong relative path.
  • Type Errors: TypeScript’s type checking can save you from runtime errors. Always pay attention to the TypeScript compiler’s error messages. They often point directly to the line of code causing the issue. Fixing type errors is often as simple as changing the type of a variable or ensuring that a function returns the correct type.
  • Missing Event Listeners: Make sure your event listeners are correctly attached to the HTML elements. Check for typos in the element IDs and make sure the elements are correctly selected in your TypeScript code.
  • Incorrect HTML Element Types: Ensure you are casting HTML elements to their correct types (e.g., HTMLInputElement, HTMLSelectElement) when using the as keyword. This helps TypeScript provide better type checking.
  • Forgetting to Compile: After making changes to your TypeScript code, remember to recompile it using npx tsc before refreshing your browser. The browser will run the JavaScript code, so any changes to the TypeScript code won’t be reflected until you compile it.
  • Input Validation Issues: Always validate user input to prevent unexpected behavior. Use isNaN() to check if the input is a valid number, and consider adding more robust validation for other types of inputs.

Extending the Unit Converter

This is a basic unit converter, but you can extend it in many ways:

  • Add More Units: Expand the unit options by adding more units (e.g., temperature, weight, volume) and their respective conversion factors.
  • Implement Error Handling: Add error handling to gracefully handle invalid inputs or unsupported conversions.
  • Improve the UI: Enhance the user interface with CSS for better styling, or use a framework like React, Angular, or Vue.js for a more sophisticated UI.
  • Add Unit Categories: Group units into categories (length, weight, temperature, etc.) to improve the user experience.
  • Support Dynamic Unit Definitions: Allow users to add their own custom units and conversion factors.
  • Use a Library: Consider using a dedicated unit conversion library, such as convert-units, for more advanced features and a wider range of units.

Summary / Key Takeaways

In this tutorial, we’ve built a simple, yet functional, unit converter using TypeScript. We covered the basics of TypeScript, including type definitions, functions, and working with HTML elements. We learned how to set up a TypeScript project, write code that interacts with the DOM, and compile the TypeScript code into JavaScript. The use of types in TypeScript allows us to catch errors early, making the code more robust and maintainable. You can apply the concepts and techniques learned in this tutorial to build other interactive web applications. Remember to always validate user inputs, and to test your application thoroughly. By following these steps, you can create a useful and efficient unit converter that can be easily extended and customized.

FAQ

Q: Why use TypeScript instead of JavaScript?
A: TypeScript offers static typing, which helps catch errors during development, improves code readability, and makes your code more maintainable. It’s especially beneficial for larger projects.

Q: How do I add more unit conversions?
A: Simply add more conversion factors and update the convert function to include the new units. You’ll also need to update the HTML to include the new unit options in the dropdowns.

Q: What if I get a type error?
A: Read the error message carefully. TypeScript errors usually point to the exact line of code where the error occurs. Common causes include incorrect variable types, mismatched function return types, or trying to access a property that doesn’t exist. Fix the code according to the error message.

Q: How can I style the UI?
A: You can add CSS styles to the index.html file. The example provided includes basic styling. For more complex styling, you might consider using a CSS framework (e.g., Bootstrap) or a CSS preprocessor (e.g., Sass).

Q: How do I handle invalid input?
A: Use JavaScript’s isNaN() function to check if the input is a valid number. You can also add more advanced validation to check for things like negative values or values outside of a specific range.

Building a unit converter is an excellent exercise in understanding the core principles of TypeScript and web development. The ability to handle different data types and user interactions is a fundamental skill, and the structure of this project can be applied to many other types of applications. The clear separation of concerns, the use of types, and the overall organization of the code are all key aspects that contribute to its efficiency and maintainability. With the knowledge gained, you can confidently tackle more complex projects and create engaging web experiences.

More posts