TypeScript Tutorial: Building a Simple Currency Converter

Written by

learnmodernjavascript

in

In today’s globalized world, dealing with different currencies is a common occurrence. Whether you’re traveling, shopping online, or managing international finances, a currency converter is an invaluable tool. Creating a currency converter application can seem daunting at first, but with TypeScript, we can build a simple yet functional one that’s easy to understand and extend. This tutorial will guide you through the process step-by-step, making it accessible even for those new to TypeScript.

Why Build a Currency Converter with TypeScript?

TypeScript offers several advantages for this project:

  • Type Safety: TypeScript’s static typing helps catch errors early in the development process, reducing debugging time.
  • Code Readability: TypeScript enhances code readability with clear type annotations, making it easier to understand and maintain.
  • Developer Experience: Features like autocompletion and refactoring support in modern IDEs significantly boost productivity.
  • Scalability: As your application grows, TypeScript’s structure helps manage complexity effectively.

By using TypeScript, we ensure our currency converter is robust, maintainable, and less prone to errors.

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running TypeScript code.
  • A Code Editor: Such as Visual Studio Code, Sublime Text, or WebStorm.
  • Basic Understanding of JavaScript: While this tutorial aims to be beginner-friendly, some familiarity with JavaScript fundamentals will be helpful.

Setting Up the Project

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

  1. Create a Project Directory: 
    mkdir currency-converter
cd currency-converter
  2. Initialize npm: 
    npm init -y

    This command creates a package.json file, which manages our project’s dependencies.

  3. Install TypeScript: 
    npm install typescript --save-dev

    This installs TypeScript as a development dependency.

  4. Create a TypeScript Configuration File: 
    npx tsc --init

    This command generates a tsconfig.json file. This file configures the TypeScript compiler. You can customize various compiler options here. For now, we’ll stick with the defaults. We will modify the outDir and rootDir properties.

  5. Create Project Structure:

    Create a directory called src inside your project folder. This is where we will keep our TypeScript files.

Fetching Currency Exchange Rates

Our currency converter needs up-to-date exchange rates. We’ll use a free and open API for this purpose. There are many APIs available; for simplicity, we will use an API that provides a simple JSON response.

First, we need to install the node-fetch package to make API requests. Install it using:

npm install node-fetch

Now, let’s create a file named src/currencyService.ts. This file will handle fetching exchange rates.

// src/currencyService.ts
import fetch from 'node-fetch';

interface ExchangeRates {
  [currencyCode: string]: number; // Define the type for exchange rates
}

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

async function getExchangeRates(baseCurrency: string): Promise {
  const apiKey = 'YOUR_API_KEY'; // Replace with your API key
  const apiUrl = `https://api.exchangerate-api.com/v4/latest/${baseCurrency}`;

  try {
    const response = await fetch(apiUrl, {
      headers: {
        'Authorization': `Bearer ${apiKey}`
      }
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data: ApiResponse = await response.json();
    return data.rates;
  } catch (error) {
    console.error('Error fetching exchange rates:', error);
    return null;
  }
}

export { getExchangeRates, ExchangeRates };

Explanation:

  • We import node-fetch to make API requests.
  • We define interfaces ExchangeRates and ApiResponse to strongly type the data we expect from the API. This helps prevent errors and improves code readability.
  • The getExchangeRates function fetches the exchange rates from the API. Replace 'YOUR_API_KEY' with your actual API key from the service you choose. Consider storing the API key in an environment variable for security.
  • Error handling is included to manage potential issues during the API call.
  • The function returns an object containing the exchange rates.

Building the Core Converter Logic

Next, let’s create the core logic for our currency converter in a file called src/converter.ts:


// src/converter.ts
import { getExchangeRates, ExchangeRates } from './currencyService';

interface ConversionResult {
  amount: number;
  fromCurrency: string;
  toCurrency: string;
  rate: number;
}

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

  if (!exchangeRates) {
    console.error('Failed to fetch exchange rates.');
    return null;
  }

  const rate = exchangeRates[toCurrency];

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

  const convertedAmount = amount * rate;

  return {
    amount: convertedAmount,
    fromCurrency,
    toCurrency,
    rate,
  };
}

export { convertCurrency };

Explanation:

  • We import the getExchangeRates function from currencyService.ts.
  • We define an interface ConversionResult to structure the conversion output, making the code more organized and readable.
  • The convertCurrency function takes the amount, source currency, and target currency as input.
  • It fetches the exchange rates for the source currency and returns the converted amount.
  • Error handling is included for cases where exchange rates are not available.

Creating the User Interface (UI)

For this example, we’ll create a simple command-line interface (CLI) to interact with our currency converter. Create a file named src/index.ts:


// src/index.ts
import { convertCurrency } from './converter';
import * as readline from 'readline/promises';
import { stdin as input, stdout as output } from 'node:process';

async function main() {
  const rl = readline.createInterface({ input, output });

  try {
    const amount = await rl.question('Enter amount: ');
    const fromCurrency = await rl.question('Enter from currency (e.g., USD): ').toUpperCase();
    const toCurrency = await rl.question('Enter to currency (e.g., EUR): ').toUpperCase();

    const amountNumber = parseFloat(amount);
    if (isNaN(amountNumber)) {
      console.error('Invalid amount. Please enter a number.');
      return;
    }

    const result = await convertCurrency(amountNumber, fromCurrency, toCurrency);

    if (result) {
      console.log(
        `${amountNumber} ${fromCurrency} is equal to ${result.amount.toFixed(2)} ${result.toCurrency} at a rate of ${result.rate.toFixed(4)}`
      );
    }
  } catch (error) {
    console.error('An error occurred:', error);
  } finally {
    rl.close();
  }
}

main();

Explanation:

  • We import the convertCurrency function from converter.ts.
  • We use the readline module to create a simple CLI.
  • The main function prompts the user for the amount, source currency, and target currency.
  • It calls the convertCurrency function and displays the result to the console.
  • Error handling is included to manage invalid input and potential errors from the conversion process.

Compiling and Running the Application

Now, let’s compile and run our TypeScript application. Open your terminal and navigate to your project directory. Then, execute the following commands:

  1. Compile TypeScript: 
    tsc

    This command compiles all the TypeScript files in the src directory and creates JavaScript files in the dist directory (as configured in tsconfig.json).

  2. Run the Application: 
    node dist/index.js

    This command executes the compiled JavaScript file.

The application will prompt you to enter the amount, source currency, and target currency. After you provide the inputs, it will display the converted amount.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to address them:

  • Incorrect API Key: Make sure you have a valid API key from the currency exchange rate provider and that you’ve replaced 'YOUR_API_KEY' with your actual key in the currencyService.ts file.
  • Network Issues: Ensure you have an active internet connection. If the API call fails, check your network connection and the API provider’s status.
  • Typo in Currency Codes: Double-check that you’re entering valid currency codes (e.g., USD, EUR, JPY) correctly.
  • Incorrect tsconfig.json configuration: Make sure that your tsconfig.json is properly configured. Double-check your outDir and rootDir properties. Also, verify that the moduleResolution property is set to node.
  • Unhandled Errors: Always include try-catch blocks to handle potential errors from the API calls or user inputs.

Enhancements and Next Steps

This simple currency converter can be further enhanced in several ways:

  • UI Improvements: Create a graphical user interface (GUI) using a framework like React, Angular, or Vue.js for a more user-friendly experience.
  • Error Handling: Implement more robust error handling, including specific error messages for different scenarios.
  • Currency Selection: Add a feature to select currencies from a dropdown or autocomplete list, improving usability.
  • Real-Time Updates: Implement real-time exchange rate updates using WebSockets or polling.
  • Historical Data: Display historical exchange rate data using charts or graphs.
  • Configuration: Allow users to configure the base currency.

Summary / Key Takeaways

In this tutorial, we’ve successfully built a simple currency converter using TypeScript. We’ve covered the essential steps, from setting up the project and fetching exchange rates to creating the core conversion logic and a basic user interface. This project demonstrates the power of TypeScript in creating robust and maintainable applications. By following this guide, you should now have a solid understanding of how to:

  • Set up a TypeScript project.
  • Fetch data from an external API.
  • Use type safety to improve code quality.
  • Build a simple command-line interface.
  • Structure your code for better readability and maintainability.

This is just the beginning. The concepts and techniques we’ve explored here can be applied to a wide range of projects. Remember to experiment, explore the enhancements, and continue learning to master TypeScript and build more complex applications.

FAQ

Here are some frequently asked questions:

  1. Can I use a different API for fetching exchange rates? Yes, you can. Just make sure to adjust the code in currencyService.ts to match the API’s response format.
  2. How do I handle different API response formats? You might need to adjust the interfaces (e.g., ExchangeRates, ApiResponse) in currencyService.ts to match the API’s response structure.
  3. What if the API has rate limits? Implement rate limiting in your application to avoid exceeding the API’s usage limits. This might involve caching exchange rates or using a more sophisticated API client.
  4. How can I deploy this application? You can deploy this application on a server using Node.js or package it as a web application using a framework like React or Angular.
  5. How can I improve the user experience? Consider adding features like currency selection, historical data visualization, and a more intuitive user interface.

Building this converter is a great starting point for exploring more advanced concepts in TypeScript and web development. The journey of learning never truly ends; it is an iterative process of building, learning, and refining.

More posts