TypeScript Tutorial: Building a Simple Interactive Weather App

Written by

learnmodernjavascript

in

In today’s digital age, we’re constantly bombarded with information, and one of the most sought-after pieces of data is the weather. Knowing the current conditions, forecasts, and potential hazards can significantly impact our daily lives, from planning outdoor activities to making informed decisions about travel. Building a weather application might seem like a complex task, but with TypeScript, we can create a simple yet functional interactive weather app that fetches data from an API and displays it in a user-friendly format. This tutorial will guide you through the process, providing a solid understanding of TypeScript concepts while building a practical application.

Why Build a Weather App with TypeScript?

TypeScript offers several advantages that make it an excellent choice for this project:

  • Type Safety: TypeScript adds static typing to JavaScript, catching potential errors during development. This reduces the likelihood of runtime errors and makes your code more reliable.
  • Code Completion and Refactoring: TypeScript provides excellent code completion and refactoring capabilities, improving developer productivity and code maintainability.
  • Object-Oriented Programming (OOP): TypeScript supports OOP principles, allowing you to structure your code in a more organized and reusable manner.
  • Community and Ecosystem: TypeScript has a large and active community, providing ample resources, libraries, and frameworks to support your development efforts.

Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js and npm (Node Package Manager): These are essential for managing project dependencies and running the application.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended due to its excellent TypeScript support.
  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these technologies will help you understand the concepts more easily.

Setting Up the Project

Let’s start by creating a new project directory and initializing it with npm:

mkdir weather-app
cd weather-app
npm init -y

This will create a package.json file, which will store our project’s metadata and dependencies. Next, install TypeScript as a development dependency:

npm install --save-dev typescript

Now, we need to initialize a TypeScript configuration file (tsconfig.json). This file tells the TypeScript compiler how to compile your code. Run the following command:

npx tsc --init

This will generate a tsconfig.json file in your project directory. You can customize the compiler options in this file. For this tutorial, we’ll keep the default settings, but you can modify them later to suit your needs.

Project Structure

Let’s create the following directory structure:

weather-app/
├── src/
│   ├── index.ts
│   └── styles.css
├── index.html
├── package.json
├── tsconfig.json
└── README.md
  • src/index.ts: This will contain our TypeScript code.
  • src/styles.css: This will contain our CSS styles.
  • index.html: This will be the HTML file that displays our weather information.
  • package.json: Contains project metadata and dependencies.
  • tsconfig.json: TypeScript compiler configuration.
  • README.md: Project documentation.

HTML Structure (index.html)

Create the 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>Weather App</title>
    <link rel="stylesheet" href="src/styles.css">
</head>
<body>
    <div class="container">
        <h1>Weather App</h1>
        <div class="search-box">
            <input type="text" id="cityInput" placeholder="Enter city name">
            <button id="searchButton">Search</button>
        </div>
        <div id="weatherInfo">
            <p id="city"></p>
            <p id="temperature"></p>
            <p id="description"></p>
            <p id="humidity"></p>
            <p id="windSpeed"></p>
        </div>
    </div>
    <script src="src/index.js"></script>
</body>
</html>

This HTML sets up the basic structure of our weather app. It includes a title, a search box for entering the city, and a section to display weather information. Notice the <script src="src/index.js"></script> tag at the end, which will load the compiled JavaScript code from our TypeScript file.

CSS Styling (src/styles.css)

Create the src/styles.css file with some basic styling to make the app visually appealing:

body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    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;
}

h1 {
    color: #333;
}

.search-box {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 10px;
}

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

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

#weatherInfo {
    margin-top: 20px;
}

This CSS provides basic styling for the app, including font, colors, and layout. Feel free to customize the styles to your liking.

TypeScript Code (src/index.ts)

Now, let’s write the TypeScript code that will fetch weather data from an API and display it in the app. Open src/index.ts and add the following code:


// Define interface for weather data
interface WeatherData {
    name: string;
    main: {
        temp: number;
        humidity: number;
    };
    weather: {
        description: string;
    }[];
    wind: {
        speed: number;
    };
}

// API key and base URL
const apiKey = 'YOUR_API_KEY'; // Replace with your API key
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';

// Get HTML elements
const cityInput = document.getElementById('cityInput') as HTMLInputElement;
const searchButton = document.getElementById('searchButton') as HTMLButtonElement;
const cityElement = document.getElementById('city') as HTMLParagraphElement;
const temperatureElement = document.getElementById('temperature') as HTMLParagraphElement;
const descriptionElement = document.getElementById('description') as HTMLParagraphElement;
const humidityElement = document.getElementById('humidity') as HTMLParagraphElement;
const windSpeedElement = document.getElementById('windSpeed') as HTMLParagraphElement;

// Function to fetch weather data
async function getWeatherData(city: string): Promise<WeatherData | null> {
    try {
        const response = await fetch(`${apiUrl}?q=${city}&appid=${apiKey}&units=metric`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data: WeatherData = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching weather data:', error);
        alert('Error fetching weather data. Please check the city name and your API key.');
        return null;
    }
}

// Function to display weather data
function displayWeatherData(data: WeatherData) {
    cityElement.textContent = data.name;
    temperatureElement.textContent = `Temperature: ${data.main.temp}°C`;
    descriptionElement.textContent = `Description: ${data.weather[0].description}`;
    humidityElement.textContent = `Humidity: ${data.main.humidity}%`;
    windSpeedElement.textContent = `Wind Speed: ${data.wind.speed} m/s`;
}

// Event listener for search button
searchButton.addEventListener('click', async () => {
    const city = cityInput.value;
    if (city) {
        const weatherData = await getWeatherData(city);
        if (weatherData) {
            displayWeatherData(weatherData);
        }
    }
});

Let’s break down this code:

  • WeatherData Interface: This interface defines the structure of the data we expect to receive from the weather API. It specifies the types of the data fields (e.g., string, number, etc.). This is a key benefit of TypeScript – it ensures type safety.
  • API Key and URL: Replace 'YOUR_API_KEY' with your actual API key from OpenWeatherMap (you’ll need to sign up for a free API key: https://openweathermap.org/api). The apiUrl variable stores the base URL for the weather API.
  • HTML Element Selection: This section retrieves the HTML elements using their IDs. The as keyword is used to cast the elements to their respective types (e.g., HTMLInputElement, HTMLButtonElement, etc.). This provides type safety when working with DOM elements.
  • getWeatherData Function:
    • This asynchronous function takes a city name as input and fetches weather data from the API.
    • It uses the fetch API to make a GET request to the OpenWeatherMap API.
    • It handles potential errors, such as network issues or invalid API responses.
    • If the request is successful, it parses the JSON response and returns the data.
    • If an error occurs, it logs an error message to the console and returns null.
  • displayWeatherData Function: This function takes the weather data as input and updates the HTML elements to display the weather information.
  • Event Listener: This adds an event listener to the search button. When the button is clicked, it retrieves the city name from the input field, calls the getWeatherData function, and displays the weather data if it’s successfully fetched.

Compiling and Running the App

To compile the TypeScript code, run the following command in your terminal:

npx tsc

This will generate a index.js file in your project directory. This is the JavaScript code that the browser will execute. Now, open index.html in your browser. You should see the basic app layout. Enter a city name and click the “Search” button. If everything is set up correctly, the app will fetch and display the weather information for that city.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • API Key Error: 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 OpenWeatherMap.
  • CORS (Cross-Origin Resource Sharing) Error: If you encounter a CORS error, it means the browser is blocking the request to the API. This usually happens when you are running your HTML file directly from your file system (e.g., by double-clicking it). To fix this, you need to serve your HTML file using a local web server. You can use a simple server like http-server (install it globally: npm install -g http-server) and then run http-server in your project directory. Then access your app through the provided local URL (usually something like http://localhost:8080).
  • Incorrect City Name: Double-check that you’ve entered the city name correctly. The API might not return data for misspelled city names.
  • Network Errors: Ensure you have an active internet connection.
  • Typos in Code: Carefully review your code for any typos, especially in variable names and API endpoint URLs. TypeScript’s type checking will help catch many of these errors during development.
  • Incorrect File Paths: Make sure the file paths in your index.html file (e.g., src/styles.css, src/index.js) are correct relative to the HTML file’s location.

Enhancements and Next Steps

This is a basic weather app, and there are many ways to enhance it:

  • Error Handling: Implement more robust error handling to provide better feedback to the user. For example, display a more informative error message if the city isn’t found.
  • Loading Indicator: Add a loading indicator (e.g., a spinner) while the weather data is being fetched.
  • Unit Conversion: Allow users to switch between Celsius and Fahrenheit.
  • Advanced Weather Details: Display additional weather information, such as the feels-like temperature, pressure, and visibility.
  • Weather Icons: Integrate weather icons to visually represent the current conditions.
  • Geolocation: Use the browser’s geolocation API to automatically fetch the user’s current location and display the weather for that location.
  • Caching: Implement caching to store weather data locally and reduce API calls.
  • User Interface Improvements: Improve the app’s design and user interface. Consider using a CSS framework like Bootstrap or Tailwind CSS.

Summary / Key Takeaways

In this tutorial, we’ve built a simple interactive weather app using TypeScript. We’ve learned how to set up a TypeScript project, fetch data from a public API, and display it in a user-friendly format. We’ve also explored the benefits of using TypeScript, such as type safety and code completion. This project provides a solid foundation for understanding TypeScript and building more complex web applications. By following this tutorial, you’ve gained practical experience with TypeScript, API interaction, and front-end development. Remember to experiment with the code, add your own features, and explore the vast possibilities of TypeScript.

FAQ

Q: Where can I get an API key for the weather data?

A: You can obtain a free API key from OpenWeatherMap: https://openweathermap.org/api. You will need to create an account and then generate an API key.

Q: Why am I getting a CORS error?

A: The CORS (Cross-Origin Resource Sharing) error occurs because the browser is preventing your JavaScript code from making requests to a different domain (the OpenWeatherMap API). To fix this, you need to serve your HTML file using a local web server (e.g., http-server) instead of opening it directly in your browser from your file system.

Q: How do I handle errors from the API?

A: In the getWeatherData function, we use a try...catch block to handle potential errors. If the API returns an error (e.g., an invalid city name), we display an error message to the user. You can expand on this by providing more specific error messages based on the API response.

Q: Can I use a different API for weather data?

A: Yes, you can. You’ll need to find a different weather API provider, obtain an API key, and modify the code to match the API’s endpoints and data format. The core concepts of fetching data and displaying it will remain the same, but the specific implementation will vary based on the API you choose.

Q: How do I deploy this app online?

A: You can deploy this app to various platforms, such as Netlify, Vercel, or GitHub Pages. These platforms allow you to host static websites easily. You’ll typically need to build your TypeScript code (using npx tsc) and then deploy the resulting HTML, CSS, and JavaScript files.

The journey of building a weather app with TypeScript is more than just about creating a functional application; it’s about solidifying your understanding of TypeScript fundamentals, API interaction, and web development best practices. The skills you’ve acquired through this project are transferable and can be applied to a wide range of other projects. Continue to explore and experiment, and never stop learning. Your ability to adapt and build upon these core principles will shape your capabilities as a developer, allowing you to create innovative and engaging web experiences.

More posts