TypeScript: Building a Simple Currency Converter

Written by

learnmodernjavascript

in

In today’s interconnected world, dealing with different currencies is a common occurrence. Whether you’re traveling, managing international business, or simply browsing online, you’ll often encounter prices and values in currencies other than your own. Manually converting these values can be tedious and prone to errors. This is where a currency converter comes in handy, providing a quick and accurate way to understand the true cost of goods and services across different economies.

Why Build a Currency Converter with TypeScript?

While many currency converters are available online, building your own offers several advantages:

  • Learning Opportunity: It’s a fantastic way to solidify your understanding of TypeScript’s core concepts.
  • Customization: You have complete control over the features and design.
  • Practical Application: You create a tool that you can use daily.
  • Type Safety: TypeScript ensures fewer runtime errors, making your code more robust.

This tutorial will guide you through building a simple, yet functional, currency converter using TypeScript. We’ll cover the essential components, from fetching exchange rates to displaying the converted values.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running the code.
  • A basic understanding of TypeScript: Familiarity with variables, types, functions, and classes will be helpful.
  • A code editor: Visual Studio Code (VS Code) is recommended, but you can use any editor you prefer.

Setting Up Your Project

Let’s start by setting up our project. Open your terminal and follow these steps:

  1. Create a Project Directory: Create a new directory for your project, for example, `currency-converter`.
  2. Initialize npm: Navigate into your project directory in the terminal and run `npm init -y`. This creates a `package.json` file.
  3. Install TypeScript: Install TypeScript as a development dependency by running `npm install –save-dev typescript`.
  4. Create a `tsconfig.json` file: Run `npx tsc –init` in your terminal. This will create a `tsconfig.json` file, which configures TypeScript’s compiler options. You can customize the `tsconfig.json` file to fit your project’s needs. For a basic setup, you can leave the default configurations.
  5. Create Source Files: Create a directory named `src` inside your project directory. Inside `src`, create a file named `index.ts`. This is where we’ll write our TypeScript code.

Your project structure should look something like this:

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

Fetching Exchange Rates

The core of our currency converter is fetching the latest exchange rates. We’ll use a free and open API for this purpose. There are many options available, but for this tutorial, we will use the ExchangeRate-API. First, you’ll need to sign up and get an API key. Then, you can use the following code to fetch the exchange rates:

// src/index.ts

interface ExchangeRates {
  [currencyCode: string]: number; // Index signature for currency codes and rates
}

interface ApiResponse {
  result: "success" | "error";
  time_last_update_unix: number;
  time_next_update_unix: number;
  base_code: string;
  conversion_rates: ExchangeRates;
}

async function getExchangeRates(baseCurrency: string, apiKey: string): Promise {
  const apiUrl = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${baseCurrency}`;

  try {
    const response = await fetch(apiUrl);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data: ApiResponse = await response.json();
    return data;
  } catch (error: any) {
    console.error("Error fetching exchange rates:", error.message);
    return null;
  }
}

Let’s break down this code:

  • Interfaces: We define two interfaces: `ExchangeRates` to represent a collection of currency rates and `ApiResponse` to match the API’s response structure. This is crucial for type safety.
  • `getExchangeRates` Function: This asynchronous function takes the base currency and API key as input.
  • API Request: It constructs the API URL using the provided base currency and API key.
  • Error Handling: It includes a `try…catch` block to handle potential network errors or API issues.
  • Return Value: The function returns the API response data if successful or `null` if an error occurs.

Common Mistakes and Fixes:

  • Incorrect API Key: Double-check that your API key is correct.
  • Network Issues: Ensure you have a stable internet connection.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, you might need to use a proxy server or configure CORS settings on your browser or server. For local development, you can use a browser extension to disable CORS temporarily.

Implementing the Conversion Logic

Now that we can fetch the exchange rates, let’s implement the conversion logic. This involves taking an amount in a base currency, fetching the exchange rate for the target currency, and performing the calculation.


interface ConversionResult {
  fromCurrency: string;
  toCurrency: string;
  amount: number;
  convertedAmount: number;
  exchangeRate: number;
}

async function convertCurrency(
  amount: number,
  fromCurrency: string,
  toCurrency: string,
  apiKey: string
): Promise {
  const apiResponse = await getExchangeRates(fromCurrency, apiKey);

  if (!apiResponse || apiResponse.result === "error") {
    console.error("Failed to fetch exchange rates.");
    return null;
  }

  const exchangeRate = apiResponse.conversion_rates[toCurrency];

  if (!exchangeRate) {
    console.error(`Exchange rate not found for ${toCurrency}.`);
    return null;
  }

  const convertedAmount = amount * exchangeRate;

  return {
    fromCurrency,
    toCurrency,
    amount,
    convertedAmount,
    exchangeRate,
  };
}

Here’s a breakdown of the conversion logic:

  • `ConversionResult` Interface: Defines the structure of the conversion result object.
  • `convertCurrency` Function: This asynchronous function takes the amount, from currency, to currency, and API key as input.
  • Fetch Exchange Rates: It calls the `getExchangeRates` function to get the exchange rates.
  • Error Handling: It checks if the API call was successful and if the exchange rate for the target currency exists.
  • Conversion Calculation: It calculates the converted amount by multiplying the original amount by the exchange rate.
  • Return Value: Returns a `ConversionResult` object containing the conversion details or `null` if an error occurred.

Common Mistakes and Fixes:

  • Incorrect Currency Codes: Double-check that you’re using the correct currency codes (e.g., USD, EUR, JPY).
  • Missing Exchange Rate: If the exchange rate is not found, ensure that the target currency is supported by the API and that you’ve spelled the currency code correctly.
  • API Rate Limits: Be mindful of the API’s rate limits. If you exceed the limits, you may receive an error. Implement error handling to manage these situations.

Building a Simple User Interface (UI)

To make our currency converter user-friendly, we need a simple UI. Let’s create a basic HTML file and use some JavaScript to interact with our TypeScript code.

  1. Create an `index.html` file: In your project directory, create an `index.html` file with the following content:

<!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>
</head>
<body>
  <h1>Currency Converter</h1>

  <div>
    <label for="amount">Amount:</label>
    <input type="number" id="amount">
  </div>

  <div>
    <label for="fromCurrency">From Currency:</label>
    <input type="text" id="fromCurrency">
  </div>

  <div>
    <label for="toCurrency">To Currency:</label>
    <input type="text" id="toCurrency">
  </div>

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

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

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

This HTML provides the basic structure for our UI, including input fields for the amount, from currency, and to currency, a button to trigger the conversion, and a div to display the result.

  1. Update `index.ts` to include UI interaction: Modify your `index.ts` file to interact with the HTML elements:

// src/index.ts

// ... (previous code)

const amountInput = document.getElementById('amount') as HTMLInputElement;
const fromCurrencyInput = document.getElementById('fromCurrency') as HTMLInputElement;
const toCurrencyInput = document.getElementById('toCurrency') as HTMLInputElement;
const convertButton = document.getElementById('convertButton') as HTMLButtonElement;
const resultDiv = document.getElementById('result') as HTMLDivElement;

const apiKey = "YOUR_API_KEY"; // Replace with your actual API key

convertButton.addEventListener('click', async () => {
  const amount = parseFloat(amountInput.value);
  const fromCurrency = fromCurrencyInput.value.toUpperCase();
  const toCurrency = toCurrencyInput.value.toUpperCase();

  if (isNaN(amount) || !fromCurrency || !toCurrency) {
    resultDiv.textContent = 'Please enter valid inputs.';
    return;
  }

  const conversionResult = await convertCurrency(amount, fromCurrency, toCurrency, apiKey);

  if (conversionResult) {
    resultDiv.textContent = `${amount} ${fromCurrency} is equal to ${conversionResult.convertedAmount.toFixed(2)} ${toCurrency} (Exchange Rate: ${conversionResult.exchangeRate.toFixed(4)})`;
  } else {
    resultDiv.textContent = 'Conversion failed. Please check your inputs and API key.';
  }
});

Let’s break down the UI interaction code:

  • Get HTML Elements: It retrieves the HTML elements using their IDs.
  • Event Listener: It adds a click event listener to the convert button.
  • Get Input Values: It retrieves the values from the input fields.
  • Input Validation: It checks if the inputs are valid.
  • Call `convertCurrency`: It calls the `convertCurrency` function to perform the conversion.
  • Display Result: It displays the result in the `resultDiv` or an error message if the conversion fails.

Common Mistakes and Fixes:

  • Incorrect Element IDs: Double-check that the element IDs in your JavaScript code match the IDs in your HTML.
  • Type Errors: Ensure that you’re casting the retrieved elements to the correct types (e.g., `HTMLInputElement`, `HTMLButtonElement`).
  • API Key: Remember to replace `”YOUR_API_KEY”` with your actual API key.

Compiling and Running Your Code

Now, let’s compile and run your code. Open your terminal and navigate to your project directory. Then, follow these steps:

  1. Compile TypeScript: Run `npx tsc` in your terminal. This will compile your TypeScript code into JavaScript and place the output in a `dist` directory.
  2. Open `index.html` in your browser: Open the `index.html` file in your web browser. You should see the currency converter UI.
  3. Test the Converter: Enter the amount, from currency, and to currency, and click the “Convert” button. The converted amount should be displayed in the result area.

Your project structure after compilation should look like this:


currency-converter/
├── package.json
├── tsconfig.json
├── src/
│   └── index.ts
├── dist/
│   └── index.js
└── index.html

Enhancements and Next Steps

This is a basic currency converter, but you can enhance it in several ways:

  • Error Handling: Implement more robust error handling to handle API errors, invalid inputs, and other potential issues.
  • Currency Selection: Add dropdowns or autocomplete for currency selection, making it easier for users to choose currencies.
  • Real-time Updates: Implement real-time updates of exchange rates using WebSockets or polling.
  • Data Persistence: Use local storage or cookies to save user preferences and conversion history.
  • Styling: Add CSS to improve the UI’s appearance.
  • Testing: Write unit tests to ensure the code’s reliability.

Key Takeaways

  • TypeScript enhances code quality and reduces errors.
  • Interfaces define the structure of data, improving code readability and maintainability.
  • Asynchronous functions and error handling are crucial for working with APIs.
  • A simple UI can be created with HTML, and JavaScript.

FAQ

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

  1. What is the best API for currency exchange rates? There are several options. ExchangeRate-API is used in this tutorial. Other popular choices include Open Exchange Rates and CurrencyLayer. Choose an API that suits your needs and budget.
  2. How can I handle API rate limits? Implement error handling to detect rate limit errors. You can also implement strategies such as caching exchange rates and using a backoff mechanism to retry requests after a delay.
  3. How do I deploy my currency converter? You can deploy your currency converter as a web application using platforms like Netlify, Vercel, or GitHub Pages. You will need to build your TypeScript code into JavaScript and ensure that your HTML and JavaScript files are correctly linked.
  4. Can I use a different UI framework? Yes, you can use any UI framework you prefer, such as React, Angular, or Vue.js. The core logic of fetching and converting currencies will remain the same, but the UI implementation will differ.
  5. What are the benefits of using TypeScript for this project? TypeScript provides type safety, which helps catch errors early in development. It also improves code readability and maintainability.

Building a currency converter with TypeScript is a great way to learn and apply your programming skills. You’ve now built a functional currency converter. Remember to experiment, explore the enhancements, and continue learning to master TypeScript and web development.

The journey of building a currency converter, from fetching exchange rates to crafting a user interface, offers a hands-on experience in TypeScript development. The steps we’ve taken together, from setting up the project to handling user input, are a microcosm of the larger software development process. By tackling this project, you’ve not only created a useful tool but also strengthened your ability to build robust, type-safe applications, one currency conversion at a time. The skills you’ve gained in error handling, API interaction, and UI design are transferable, empowering you to tackle more complex projects with confidence and a deeper understanding of the power and precision that TypeScript brings to the table.

More posts