TypeScript Tutorial: Building a Simple Interactive Currency Converter

Written by

learnmodernjavascript

in

In today’s interconnected world, we frequently encounter the need to convert currencies. Whether you’re planning a trip abroad, managing international finances, or simply browsing online stores, understanding currency exchange rates is crucial. Manually calculating these conversions can be tedious and prone to errors. This tutorial will guide you through building a simple, interactive currency converter using TypeScript, providing a hands-on learning experience that’s both practical and enjoyable. We’ll cover the fundamental concepts of TypeScript, how to fetch real-time exchange rates, and how to create a user-friendly interface to perform currency conversions effortlessly.

Why TypeScript?

Before we dive into the code, let’s address why TypeScript is an excellent choice for this project. TypeScript is a superset of JavaScript that adds static typing. This means you can define the types of variables, function parameters, and return values. This feature offers several advantages:

  • Early Error Detection: TypeScript helps catch errors during development, before you even run your code. This saves time and reduces frustration.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain, especially in larger projects.
  • Enhanced Developer Experience: TypeScript provides better autocompletion, refactoring, and other features in your IDE, making coding more efficient.
  • Scalability: TypeScript makes it easier to scale your applications as they grow in complexity.

By using TypeScript, we can build a more robust and maintainable currency converter.

Setting Up Your Development Environment

To get started, you’ll need the following:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running your TypeScript code. You can download them from the official Node.js website.
  • A Code Editor: Choose your favorite code editor. Visual Studio Code (VS Code) is a popular and excellent choice, with great TypeScript support.

Once you have these 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, `currency-converter`.
  2. Initialize npm: Navigate into your project directory and run `npm init -y`. This will create a `package.json` file.
  3. Install TypeScript: Install TypeScript as a development dependency by running `npm install typescript –save-dev`.
  4. Create a `tsconfig.json` file: This file configures the TypeScript compiler. Run `npx tsc –init` to generate a default `tsconfig.json` file. You can customize this file to fit your project’s needs. For a basic project, the default settings are often sufficient.

Project Structure

Let’s plan out the structure of our project. We’ll keep it simple for this tutorial:

currency-converter/
├── src/
│   ├── index.ts        // Main application logic
│   └── styles.css      // Basic styling
├── tsconfig.json
├── package.json
└── index.html          // HTML structure

This structure helps us organize our code and separate different aspects of the application.

Building the HTML Structure (index.html)

First, let’s create the HTML structure for our currency converter. Create a file named `index.html` in the root of your project and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currency Converter</title>
    <link rel="stylesheet" href="src/styles.css">
</head>
<body>
    <div class="container">
        <h1>Currency Converter</h1>
        <div class="converter-box">
            <div class="input-group">
                <label for="amount">Amount:</label>
                <input type="number" id="amount" value="1">
            </div>
            <div class="input-group">
                <label for="fromCurrency">From:</label>
                <select id="fromCurrency">
                    <!-- Currencies will be populated here dynamically -->
                </select>
            </div>
            <div class="input-group">
                <label for="toCurrency">To:</label>
                <select id="toCurrency">
                    <!-- Currencies will be populated here dynamically -->
                </select>
            </div>
            <button id="convertButton">Convert</button>
            <div id="result"></div>
        </div>
    </div>
    <script src="./dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure for our converter, including input fields for the amount, from and to currencies, a button to trigger the conversion, and a display area for the result. We’ve also included a link to our CSS file and a script tag for our JavaScript file.

Adding Basic Styling (styles.css)

To make our currency converter look presentable, let’s add some basic CSS styling. Create a file named `styles.css` inside the `src` directory and add the following:

body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.converter-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
}

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

button {
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result {
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.2em;
}

This CSS provides a basic layout and styling for the HTML elements, making the converter more user-friendly.

Writing the TypeScript Logic (index.ts)

Now, let’s write the core TypeScript logic for our currency converter. Create a file named `index.ts` inside the `src` directory and add the following code:

// Define types
interface ExchangeRates {
    [currencyCode: string]: number;
}

interface ExchangeRateApiResponse {
    rates: ExchangeRates;
    base: string;
    date: string;
}

// API Configuration
const API_KEY = 'YOUR_API_KEY'; // Replace with your actual API key
const API_URL = 'https://api.exchangerate.host/latest'; // Example API, change if needed

// DOM Elements
const amountInput = document.getElementById('amount') as HTMLInputElement;
const fromCurrencySelect = document.getElementById('fromCurrency') as HTMLSelectElement;
const toCurrencySelect = document.getElementById('toCurrency') as HTMLSelectElement;
const convertButton = document.getElementById('convertButton') as HTMLButtonElement;
const resultDiv = document.getElementById('result') as HTMLDivElement;

// State
let exchangeRates: ExchangeRates = {};

// Function to fetch exchange rates
async function fetchExchangeRates() {
    try {
        const response = await fetch(`${API_URL}?access_key=${API_KEY}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data: ExchangeRateApiResponse = await response.json();
        exchangeRates = data.rates;
    } catch (error: any) {
        console.error('Failed to fetch exchange rates:', error);
        resultDiv.textContent = 'Failed to fetch exchange rates. Please check the console.';
    }
}

// Function to populate currency options
function populateCurrencies(currencies: string[]) {
    currencies.forEach(currency => {
        const option = document.createElement('option');
        option.value = currency;
        option.textContent = currency;
        fromCurrencySelect.appendChild(option.cloneNode(true));
        toCurrencySelect.appendChild(option);
    });
}

// Function to convert currency
function convertCurrency() {
    const amount = parseFloat(amountInput.value);
    const fromCurrency = fromCurrencySelect.value;
    const toCurrency = toCurrencySelect.value;

    if (isNaN(amount) || !exchangeRates[fromCurrency] || !exchangeRates[toCurrency]) {
        resultDiv.textContent = 'Invalid input or exchange rate not available.';
        return;
    }

    const rateFrom = exchangeRates[fromCurrency];
    const rateTo = exchangeRates[toCurrency];
    const convertedAmount = (amount / rateFrom) * rateTo;

    resultDiv.textContent = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
}

// Event Listeners
async function setupEventListeners() {
    convertButton.addEventListener('click', convertCurrency);
}

// Initialization
async function initialize() {
    await fetchExchangeRates();
    const currencies = Object.keys(exchangeRates);
    populateCurrencies(currencies);
    setupEventListeners();
}

initialize();

Let’s break down this code:

  • Types and Interfaces: We define types and interfaces (ExchangeRates, ExchangeRateApiResponse) to ensure type safety and improve code readability.
  • API Configuration: We set up variables for the API key and URL. Important: You will need to replace 'YOUR_API_KEY' with your actual API key from a currency exchange rate provider (like exchangerate.host or others).
  • DOM Element Selection: We select the HTML elements we’ll be interacting with (input fields, select boxes, button, result div).
  • State Management: We declare a variable exchangeRates to store the fetched exchange rates.
  • fetchExchangeRates() Function: This asynchronous function fetches exchange rates from the API. It handles potential errors and updates the exchangeRates object.
  • populateCurrencies() Function: This function dynamically populates the currency select options based on the available exchange rates.
  • convertCurrency() Function: This function performs the currency conversion calculation. It retrieves the amount, from currency, and to currency, and then calculates the converted amount using the exchange rates. It also handles input validation.
  • setupEventListeners() Function: This function sets up event listeners for the ‘Convert’ button.
  • initialize() Function: This function orchestrates the initialization process: fetching exchange rates, populating currency options, and setting up event listeners.

Compiling and Running the Code

Now that we’ve written the TypeScript code, we need to compile it into JavaScript that the browser can understand. And then, we’ll run the application.

  1. Compile the TypeScript: Open your terminal and run the command `tsc`. This will compile the TypeScript code in `index.ts` and create a `index.js` file in a `dist` folder. The `tsconfig.json` file controls the compiler’s behavior. By default, it’s configured to output to a `dist` directory.
  2. Serve the Application: You can use a simple web server to serve your HTML file. One easy option is to use the `serve` package, which you can install globally or locally in your project. To install it locally, run `npm install serve –save-dev`. Then, you can run the server using `npx serve`. This will typically serve your files on `http://localhost:5000` or a similar address.
  3. Test in Your Browser: Open your web browser and navigate to the address where the server is running (e.g., `http://localhost:5000`). You should see your currency converter interface. Enter an amount, select currencies, and click the ‘Convert’ button to see the result.

Handling Common Mistakes

As you build this project, you might encounter some common issues. Here’s how to troubleshoot them:

  • API Key Issues: Make sure you have a valid API key from your chosen currency exchange rate provider. Double-check that you’ve replaced 'YOUR_API_KEY' in your code with your actual key. Also, verify that your API key is not rate-limited, especially during testing.
  • CORS Errors: If you’re getting CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking the request to the API because the API server doesn’t allow requests from your domain. You might need to enable CORS for local development. One way to do this is to use a browser extension that allows you to bypass CORS restrictions. Alternatively, you can use a proxy server or configure your web server to handle CORS correctly.
  • Incorrect API Endpoint: Double-check the API endpoint URL. Make sure it’s the correct URL for the API you are using, and that it is formatted as the API expects.
  • Type Errors: TypeScript will help you catch type errors during development. Make sure you’re properly defining the types for your variables and function parameters. Review the error messages carefully, and fix the type mismatches.
  • Network Errors: If you’re not getting exchange rates, check your browser’s developer console for network errors. Ensure that your internet connection is working, and that the API server is reachable.
  • Incorrect HTML Element References: Make sure that your JavaScript code correctly references the HTML elements. Check the `id` attributes in your HTML, and make sure they match the element references in your TypeScript code.

Enhancements and Next Steps

Once you have a working currency converter, you can explore several enhancements:

  • Error Handling: Implement more robust error handling, providing informative messages to the user if the API request fails or if there are other issues.
  • Currency Symbols: Display currency symbols alongside the amounts to make the interface more user-friendly.
  • User Interface (UI) Improvements: Enhance the UI with better styling, responsive design, and more intuitive controls.
  • Currency List: Allow the user to select from a more comprehensive list of currencies. You might need to fetch a list of supported currencies from the API or hardcode a list.
  • Real-time Updates: Implement real-time updates of exchange rates, perhaps using WebSockets or polling.
  • Historical Data: Add the ability to view historical exchange rates.
  • Local Storage: Store the user’s preferred currencies in local storage for a better user experience.
  • Frameworks: Consider using a JavaScript framework (like React, Angular, or Vue.js) to build a more complex and feature-rich application.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned how to use TypeScript to create a type-safe application.
  • API Integration: You’ve learned how to fetch data from an external API.
  • DOM Manipulation: You’ve learned how to interact with HTML elements using JavaScript.
  • Event Handling: You’ve learned how to handle user interactions using event listeners.
  • Project Structure: You’ve learned how to structure a basic web application.

FAQ

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

  1. What is static typing, and why is it important in TypeScript? Static typing is the process of checking the type of a variable at compile time. In TypeScript, you define the types of variables, function parameters, and return values. This is important because it helps catch errors early in the development process, improves code readability, and makes your code more maintainable.
  2. How do I get an API key for a currency exchange rate API? You’ll need to sign up for an account with a currency exchange rate provider. Many providers offer free or paid plans. You can search online for “currency exchange rate API” to find different options. Once you have an account, you’ll be able to obtain an API key.
  3. How do I handle CORS errors? CORS (Cross-Origin Resource Sharing) errors occur when your browser blocks requests to an API because the API server doesn’t allow requests from your domain. To handle CORS errors, you can use a browser extension, a proxy server, or configure your web server to handle CORS correctly.
  4. Can I use a different API for fetching exchange rates? Yes, you can use any currency exchange rate API. You’ll need to modify the `API_URL` and potentially the data parsing logic in the `fetchExchangeRates()` function to match the API’s requirements.
  5. What are some popular JavaScript frameworks I could use to build a currency converter? Popular frameworks include React, Angular, and Vue.js. These frameworks provide more structure and features for building complex web applications.

Building this currency converter provides a solid foundation for understanding the basics of TypeScript and web development. You’ve learned how to fetch data from an API, manipulate the DOM, and handle user interactions. The skills and concepts you’ve learned can be applied to many other web development projects. Remember to experiment, explore the enhancements, and continue learning to expand your skills. This project is not just about converting currencies; it’s about understanding the core principles of building interactive web applications with TypeScript and JavaScript. The journey of learning never truly ends, but the satisfaction of building something tangible, something useful, is a reward in itself. Keep coding, keep exploring, and enjoy the process of creating!

More posts