TypeScript Tutorial: Creating a Simple Currency Converter App

Written by

learnmodernjavascript

in

In today’s interconnected world, dealing with different currencies is a common occurrence. Whether you’re traveling, shopping online, or managing international finances, having a reliable currency converter at your fingertips is incredibly useful. This tutorial will guide you through creating a simple, yet functional, currency converter application using TypeScript, a powerful superset of JavaScript that adds static typing to your code. We’ll break down the process step-by-step, explaining the core concepts and providing practical examples to help you build your own converter app.

Why TypeScript?

Before we dive into the code, let’s discuss why TypeScript is an excellent choice for this project. TypeScript offers several benefits over plain JavaScript, including:

  • Type Safety: TypeScript allows you to define the types of your variables, function parameters, and return values. This helps catch errors during development, leading to more robust and maintainable code.
  • Improved Code Readability: With type annotations, your code becomes easier to understand and reason about. This is especially helpful when working in teams or revisiting your code after some time.
  • Enhanced Developer Experience: TypeScript provides excellent tooling support, including autocompletion, refactoring, and error checking, which significantly improves your development workflow.
  • Object-Oriented Programming (OOP) Features: TypeScript supports OOP concepts like classes, interfaces, and inheritance, enabling you to write well-structured and organized code.

By using TypeScript, we can create a currency converter app that is not only functional but also easier to maintain and scale in the future.

Setting Up the Project

Let’s get started by setting up our project. First, make sure you have Node.js and npm (Node Package Manager) or yarn installed on your system. These tools are essential for managing project dependencies and running our code.

1. Create a Project Directory: Create a new directory for your project and navigate into it using your terminal:

mkdir currency-converter-app
cd currency-converter-app

2. Initialize the Project: Initialize a new npm project by running the following command. This will create a package.json file, which will hold information about your project and its dependencies.

npm init -y

3. Install TypeScript: Install TypeScript as a development dependency. This allows us to use the TypeScript compiler to transpile our code into JavaScript.

npm install --save-dev typescript

4. Create a TypeScript Configuration File: Create a tsconfig.json file in your project directory. This file configures the TypeScript compiler. You can generate a basic configuration file by running the following command:

npx tsc --init

This will generate a tsconfig.json file with default settings. You can customize these settings to suit your project’s needs. For example, you might want to specify the output directory for your compiled JavaScript files or enable strict type checking.

Project Structure

Before we start writing code, let’s define a simple project structure:

currency-converter-app/
├── src/
│   ├── index.ts        // Main application file
│   └── currencyData.ts // File to store currency data
├── tsconfig.json
└── package.json

This structure is straightforward: We have a src directory to hold our TypeScript source files, a tsconfig.json file for TypeScript configuration, and a package.json file for project dependencies and metadata. The index.ts file will contain the main logic of our application, and currencyData.ts will store currency exchange rates.

Fetching Currency Data

Our currency converter app will need up-to-date exchange rates to function correctly. We can fetch this data from a reliable API. For this tutorial, we’ll use a free API that provides currency exchange rates. You can find many free APIs available; however, the specific API you choose may influence the code that follows. The code below assumes you’re using an API that returns a JSON object with currency codes as keys and exchange rates as values.

Create a file named currencyData.ts in the src directory and add the following code:

// src/currencyData.ts

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

// Placeholder function to fetch currency exchange rates from an API.
// Replace with your actual API call.
async function fetchExchangeRates(): Promise {
  try {
    const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
    const apiUrl = `https://api.example.com/exchangerates?apikey=${apiKey}`; // Replace with your actual API endpoint
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    // Assuming the API returns an object with currency codes as keys and rates as values
    return data.rates as ExchangeRates;
  } catch (error: any) {
    console.error('Error fetching exchange rates:', error.message);
    // Provide default or fallback exchange rates if the API fails
    return {
      USD: 1,      // Example: 1 USD = 1 USD
      EUR: 0.9,    // Example: 1 USD = 0.9 EUR
      GBP: 0.8,    // Example: 1 USD = 0.8 GBP
      JPY: 140     // Example: 1 USD = 140 JPY
    };
  }
}

export { fetchExchangeRates, ExchangeRates };

In this code:

  • We define an interface ExchangeRates to specify the structure of the data we expect from the API. This is good practice for type safety.
  • The fetchExchangeRates function is an asynchronous function that fetches exchange rates from an API. Important: You’ll need to replace 'YOUR_API_KEY' and the API endpoint with your actual API key and endpoint. Many APIs require an API key for access.
  • The function handles potential errors gracefully by catching exceptions and providing fallback exchange rates if the API call fails.
  • We export both the fetchExchangeRates function and the ExchangeRates interface, so we can use them in our main application file.

Building the Core Logic (index.ts)

Now, let’s create the main logic of our currency converter app in index.ts. This file will handle user input, fetch exchange rates, perform the conversion, and display the results.

Create the index.ts file in the src directory and add the following code:

// src/index.ts
import { fetchExchangeRates, ExchangeRates } from './currencyData';

// Define the available currencies
const currencies = ['USD', 'EUR', 'GBP', 'JPY'];

// Function to validate the currency code
function isValidCurrency(currency: string): boolean {
  return currencies.includes(currency);
}

// Function to perform the currency conversion
async function convertCurrency(amount: number, fromCurrency: string, toCurrency: string, exchangeRates: ExchangeRates): Promise {
  if (!isValidCurrency(fromCurrency) || !isValidCurrency(toCurrency)) {
    console.error('Invalid currency code.');
    return null;
  }

  const fromRate = exchangeRates[fromCurrency];
  const toRate = exchangeRates[toCurrency];

  if (!fromRate || !toRate) {
    console.error('Exchange rate not found for one or more currencies.');
    return null;
  }

  // Convert from base currency (USD) to target currency
  const convertedAmount = (amount / fromRate) * toRate;
  return convertedAmount;
}

// Main function to run the currency converter
async function main() {
  const exchangeRates = await fetchExchangeRates();

  // Get user input (This part is simplified for demonstration. In a real app, you'd use HTML input elements)
  const amount = parseFloat(prompt('Enter amount:') || '0');
  const fromCurrency = prompt('Enter from currency (e.g., USD):') || 'USD';
  const toCurrency = prompt('Enter to currency (e.g., EUR):') || 'EUR';

  if (isNaN(amount)) {
    console.error('Invalid amount.');
    return;
  }

  const convertedAmount = await convertCurrency(amount, fromCurrency.toUpperCase(), toCurrency.toUpperCase(), exchangeRates);

  if (convertedAmount !== null) {
    console.log(`${amount} ${fromCurrency.toUpperCase()} = ${convertedAmount.toFixed(2)} ${toCurrency.toUpperCase()}`);
  }
}

// Run the main function
main();

Let’s break down this code:

  • We import the fetchExchangeRates function and the ExchangeRates interface from currencyData.ts.
  • We define an array currencies containing the currency codes we support.
  • The isValidCurrency function checks if a given currency code is valid.
  • The convertCurrency function is the core of our application. It takes the amount to convert, the source and target currencies, and the exchange rates as input. It then performs the conversion and returns the result. Error handling is included to manage invalid currency codes or missing exchange rates.
  • The main function is the entry point of our application. It fetches the exchange rates, prompts the user for input (amount, source currency, and target currency), performs the conversion, and displays the result in the console. Note that for simplicity, we’re using prompt() for user input. In a real-world application, you would use HTML input elements and event listeners.
  • Finally, we call the main function to run the application.

Compiling and Running the Application

Now that we’ve written the code, let’s compile and run the application. TypeScript code needs to be compiled into JavaScript before it can be executed in a browser or Node.js environment. That’s where the TypeScript compiler comes in.

1. Compile the TypeScript Code: Open your terminal and navigate to your project directory. Run the following command to compile your TypeScript code into JavaScript:

tsc

This command will use the tsconfig.json file to compile all TypeScript files in your src directory and output the corresponding JavaScript files (e.g., index.js and currencyData.js) in the output directory specified in tsconfig.json (by default, it’s the same directory as the source files). If you haven’t changed the defaults, the JavaScript files will be created in the same src directory.

2. Run the Application: After the code compiles, you can execute the JavaScript code using Node.js:

node src/index.js

The program will prompt you to enter the amount, the source currency, and the target currency. Provide the requested information, and the program will display the converted amount in the console.

Enhancements and Considerations

The currency converter app we’ve built is a basic example. There are many ways to enhance it and make it more user-friendly and feature-rich. Here are some ideas:

  • User Interface (UI): Instead of using prompt() for input and console.log() for output, create a user-friendly UI using HTML, CSS, and JavaScript. This would allow users to interact with the converter through input fields, dropdown menus, and a visually appealing display.
  • Error Handling: Implement more robust error handling to catch and handle potential issues, such as invalid API responses, network errors, and incorrect user input.
  • Currency Selection: Add a feature that allows users to select currencies from a dropdown list or a search box.
  • API Integration: Integrate with a real-time currency exchange rate API to fetch updated exchange rates automatically.
  • Caching: Implement caching to store exchange rates locally to reduce API calls and improve performance.
  • History: Add a history feature to store and display previous conversions.
  • Testing: Write unit tests to ensure that your code functions correctly and to catch potential bugs early in the development process.
  • Frameworks: Consider using a front-end framework like React, Angular, or Vue.js to build a more complex and interactive user interface.

Common Mistakes and How to Fix Them

When working on this project, you might encounter some common mistakes. Here’s a list of potential issues and how to resolve them:

  • Incorrect API Key: The most common issue is forgetting to replace 'YOUR_API_KEY' with your actual API key. Make sure you have a valid API key from your chosen currency exchange rate provider and that you’ve entered it correctly in the currencyData.ts file.
  • API Endpoint Errors: Double-check the API endpoint URL to ensure it is correct. Also, verify that the API you’re using is still active and that the URL hasn’t changed.
  • Type Errors: TypeScript will help you catch type errors during development. If you encounter type errors, carefully review your code and make sure that the types of your variables, function parameters, and return values are consistent. Use the error messages provided by the TypeScript compiler to guide you.
  • Incorrect Data Structure from API: The code assumes the API returns a specific JSON structure. If the API returns data in a different format, you’ll need to adjust the code accordingly, particularly in the fetchExchangeRates function. Inspect the API’s response to understand its structure.
  • CORS Issues: If you are running the application in a browser and the API you are using has CORS restrictions, you might encounter errors when trying to fetch data from the API. CORS (Cross-Origin Resource Sharing) is a security feature that restricts web pages from making requests to a different domain than the one that served the web page. One solution is to use a proxy server or configure CORS on the API server to allow requests from your domain.
  • Missing Dependencies: Make sure you have installed all the necessary dependencies using npm or yarn. If you encounter an error related to a missing module, run npm install <module-name> or yarn add <module-name> to install it.

Key Takeaways

In this tutorial, we’ve covered the basics of creating a currency converter app using TypeScript. Here are the key takeaways:

  • TypeScript Advantages: TypeScript provides type safety, improved code readability, and enhanced developer experience, making it an excellent choice for building robust and maintainable applications.
  • Project Setup: We learned how to set up a TypeScript project, including installing TypeScript, creating a tsconfig.json file, and organizing our project structure.
  • Fetching Data: We explored how to fetch currency exchange rates from an API and handle potential errors.
  • Core Logic: We built the core logic of the currency converter, including currency validation and conversion calculations.
  • Compiling and Running: We learned how to compile TypeScript code into JavaScript and run the application using Node.js.
  • Enhancements: We discussed several ways to enhance the application, such as adding a user interface, implementing error handling, and integrating with a real-time API.

FAQ

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

  1. Q: Can I use a different API for fetching exchange rates?

    A: Yes, you can. Simply replace the API endpoint and adjust the code in the fetchExchangeRates function to handle the specific data format returned by your chosen API.

  2. Q: How can I add a user interface to the app?

    A: You can use HTML, CSS, and JavaScript to create a user interface. You can also use a front-end framework like React, Angular, or Vue.js to simplify the UI development process.

  3. Q: How do I handle errors when fetching data from the API?

    A: You can use a try...catch block to handle errors when calling the API. In the catch block, you can log the error, display an error message to the user, or provide default values.

  4. Q: How can I improve the performance of the app?

    A: You can improve performance by caching exchange rates locally to reduce API calls, using optimized data structures, and minimizing the number of DOM manipulations if you add a UI.

  5. Q: Can I deploy this app to the web?

    A: Yes, you can deploy the app to the web. You’ll need to compile your TypeScript code into JavaScript, create an HTML file with the necessary UI elements, and deploy the files to a web server or a platform like Netlify or Vercel.

Building a currency converter app is a great way to learn and practice TypeScript. By following the steps outlined in this tutorial and experimenting with different features, you can create a useful and engaging application. The concepts you’ve learned, such as type safety, API integration, and error handling, are fundamental to building more complex applications. Keep exploring, experimenting, and refining your skills, and you’ll be well on your way to becoming a proficient TypeScript developer.

More posts