TypeScript Tutorial: Build a Simple Interactive Weather App

Written by

learnmodernjavascript

in

In today’s interconnected world, weather information is readily accessible at our fingertips. From planning your day to understanding global climate patterns, accurate weather data is invaluable. Building a simple interactive weather app provides a fantastic opportunity to learn TypeScript, a powerful superset of JavaScript that adds static typing and other features to enhance code quality and developer experience. This tutorial will guide you through creating a functional weather application that fetches data from a weather API, displays it to the user, and allows for basic interaction. We’ll cover everything from setting up your development environment to handling API responses and displaying weather conditions in a user-friendly manner. This project is ideal for beginners and intermediate developers looking to deepen their understanding of TypeScript and build practical, real-world applications.

Setting Up Your Development Environment

Before we dive into the code, let’s set up the necessary tools. You’ll need:

  • Node.js and npm (Node Package Manager): These are essential for managing project dependencies and running the TypeScript compiler.
  • A code editor (e.g., Visual Studio Code, Sublime Text, Atom): Choose an editor that you’re comfortable with.
  • A web browser (e.g., Chrome, Firefox, Safari): For testing your application.

Step-by-step setup:

  1. Install Node.js and npm: Download and install Node.js from the official website (nodejs.org). npm comes bundled with Node.js.
  2. Create a project directory: Create a new directory for your project (e.g., `weather-app`).
  3. Initialize a Node.js project: Open your terminal, navigate to your project directory, and run `npm init -y`. This will create a `package.json` file.
  4. Install TypeScript: In your terminal, run `npm install typescript –save-dev`. This installs TypeScript as a development dependency.
  5. Create a `tsconfig.json` file: Run `npx tsc –init` in your terminal. This creates a `tsconfig.json` file, which configures the TypeScript compiler. You can customize this file to adjust compiler settings (e.g., target ECMAScript version, module system). For this project, you can use the default settings.
  6. Create an `index.html` file: In your project directory, create an `index.html` file. This will be the entry point for your web application.
  7. Create an `index.ts` file: Create an `index.ts` file. This is where we’ll write our TypeScript code.

Fetching Weather Data from an API

The core of our weather app will involve fetching weather data from a weather API. There are many free and paid weather APIs available. For this tutorial, we will use the OpenWeatherMap API due to its ease of use and generous free tier. You will need to sign up for a free account and obtain an API key.

Obtaining an API Key:

  1. Go to OpenWeatherMap and sign up for a free account.
  2. After signing up and logging in, navigate to your account dashboard.
  3. Find the “API keys” section and generate a new API key. Copy this key; you’ll need it in your code.

Writing the TypeScript code to fetch data:

Now, let’s write the TypeScript code to fetch the weather data. Open your `index.ts` file and add the following code:


 const apiKey = "YOUR_API_KEY"; // Replace with your actual API key
 const apiUrl = "https://api.openweathermap.org/data/2.5/weather";

 async function getWeather(city: string): Promise {
  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 = await response.json();
  return data;
  } catch (error: any) {
  console.error("Error fetching weather data:", error);
  throw error; // Re-throw the error to be handled by the caller
  }
 }

 // Example usage:
 async function displayWeather(city: string) {
  try {
  const weatherData = await getWeather(city);
  console.log(weatherData);
  // You'll display the data on the page here (see the next section)
  } catch (error) {
  // Handle errors (e.g., display an error message to the user)
  alert("Could not fetch weather data. Please check the city name and your API key.");
  }
 }

 // Call the function to test it (e.g., for London):
 displayWeather("London");

Explanation:

  • `apiKey`: Stores your OpenWeatherMap API key. Important: Replace “YOUR_API_KEY” with your actual key. Never commit your API key directly to a public repository. Consider using environment variables in a real-world application.
  • `apiUrl`: The base URL for the OpenWeatherMap API.
  • `getWeather(city: string)`: 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. The `units=metric` parameter ensures that the temperature is returned in Celsius.
  • `response.ok`: This checks if the HTTP response status is in the 200-299 range (success). If not, it throws an error.
  • `response.json()`: Parses the JSON response from the API.
  • `displayWeather(city: string)`: This function calls `getWeather` and handles the response. It logs the weather data to the console. In a real application, you would update the DOM to display the weather information. This function also handles potential errors by displaying an alert to the user.
  • Error Handling: The code includes `try…catch` blocks to handle potential errors, such as network issues or invalid API responses. This is crucial for creating robust applications. The `throw error` in the `getWeather` function is important to propagate the error up to the `displayWeather` function for handling.
  • Async/Await: The code uses `async` and `await` to handle asynchronous operations (like fetching data from the API). This makes the code more readable and easier to understand.

Displaying Weather Data in the User Interface

Now that we can fetch weather data, let’s display it in our `index.html` file. We’ll add some basic HTML elements to show the city name, temperature, weather description, and an icon representing the weather conditions. We will also add an input field for the user to enter a city and a button to trigger the weather data retrieval.

Modify `index.html`:


 <!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>
  <style>
  body {
  font-family: sans-serif;
  }
  .weather-container {
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 20px;
  width: 300px;
  }
  #weatherIcon {
  width: 50px;
  height: 50px;
  }
  </style>
 </head>
 <body>
  <h1>Weather App</h1>
  <div>
  <input type="text" id="cityInput" placeholder="Enter city name">
  <button id="searchButton">Get Weather</button>
  </div>
  <div class="weather-container" id="weatherData" style="display: none;">
  <h2 id="cityName"></h2>
  <img id="weatherIcon" src="" alt="Weather Icon">
  <p id="weatherDescription"></p>
  <p>Temperature: <span id="temperature"></span> °C</p>
  </div>
  <script src="index.js"></script>
 </body>
 </html>

Explanation of `index.html`:

  • Basic HTML structure: Includes the necessary `head` and `body` tags.
  • Input field and button: Allows the user to enter a city name and trigger the weather data retrieval.
  • Weather data display area: A `div` with the id “weatherData” that will hold the city name, weather icon, description, and temperature. Initially, it’s hidden with `style=”display: none;”`.
  • CSS Styling: Basic CSS for layout and appearance.
  • Script tag: Includes the compiled JavaScript file (`index.js`), which will contain our TypeScript code.

Modify `index.ts` to update the DOM:

Now, let’s modify the `index.ts` file to interact with the HTML elements and display the weather data. Replace the `console.log(weatherData);` line in the `displayWeather` function with the following code:


 // ... (previous code)

 async function displayWeather(city: string) {
  try {
  const weatherData = await getWeather(city);
  const weatherContainer = document.getElementById('weatherData') as HTMLElement;
  const cityNameElement = document.getElementById('cityName') as HTMLHeadingElement;
  const weatherIconElement = document.getElementById('weatherIcon') as HTMLImageElement;
  const weatherDescriptionElement = document.getElementById('weatherDescription') as HTMLParagraphElement;
  const temperatureElement = document.getElementById('temperature') as HTMLSpanElement;

  if (weatherData) {
  cityNameElement.textContent = weatherData.name;
  const iconCode = weatherData.weather[0].icon;
  weatherIconElement.src = `http://openweathermap.org/img/wn/${iconCode}@2x.png`;
  weatherIconElement.alt = weatherData.weather[0].description;
  weatherDescriptionElement.textContent = weatherData.weather[0].description;
  temperatureElement.textContent = weatherData.main.temp.toFixed(1);
  weatherContainer.style.display = 'block'; // Show the weather data container
  }
  } catch (error) {
  // Handle errors (e.g., display an error message to the user)
  alert("Could not fetch weather data. Please check the city name and your API key.");
  }
 }

 // Event listener for the search button
 document.addEventListener('DOMContentLoaded', () => {
  const searchButton = document.getElementById('searchButton') as HTMLButtonElement;
  const cityInput = document.getElementById('cityInput') as HTMLInputElement;

  if (searchButton && cityInput) {
  searchButton.addEventListener('click', () => {
  const city = cityInput.value;
  if (city) {
  displayWeather(city);
  }
  });
  }
 });

Explanation:

  • Get HTML elements: The code retrieves references to the HTML elements using `document.getElementById()`. The `as` keyword is used to type cast the retrieved elements to their correct types (e.g., `HTMLElement`, `HTMLHeadingElement`). This allows TypeScript to provide type checking and auto-completion, improving code quality.
  • Update HTML elements: If the `weatherData` is valid, the code updates the content of the HTML elements with the weather information:
    • `cityNameElement.textContent = weatherData.name;` sets the city name.
    • `weatherIconElement.src = `http://openweathermap.org/img/wn/${iconCode}@2x.png`;` sets the weather icon source.
    • `weatherDescriptionElement.textContent = weatherData.weather[0].description;` sets the weather description.
    • `temperatureElement.textContent = weatherData.main.temp.toFixed(1);` sets the temperature.
    • `weatherContainer.style.display = ‘block’;` shows the weather data container.
  • Event Listener: An event listener is added to the “searchButton” to trigger the `displayWeather` function when the button is clicked. It retrieves the city name from the input field. The `DOMContentLoaded` event listener ensures that the script runs after the HTML is fully loaded.
  • Type Assertions: The `as` keyword is used for type assertions. For example: `const searchButton = document.getElementById(‘searchButton’) as HTMLButtonElement;`. This tells TypeScript that we know the element is of a specific type. This is important for type safety and to avoid errors.

Compiling and Running the Application

Now that we’ve written our code, let’s compile and run the application. Follow these steps:

  1. Compile the TypeScript code: Open your terminal and navigate to your project directory. Run the command `tsc`. This will compile your `index.ts` file into a `index.js` file. The `tsc` command uses the settings in your `tsconfig.json` to compile the code.
  2. Open `index.html` in your browser: Open the `index.html` file in your web browser. You can usually do this by right-clicking the file in your file explorer and selecting “Open with” your browser of choice.
  3. Test the application: Enter a city name in the input field and click the “Get Weather” button. If everything is set up correctly, the weather data for that city should be displayed.

Troubleshooting Common Issues:

  • API Key Errors: Double-check that you’ve replaced “YOUR_API_KEY” with your actual API key and that the key is valid. Also, make sure that you are not exceeding the API’s rate limits (if applicable).
  • Network Errors: Ensure that you have a stable internet connection.
  • CORS (Cross-Origin Resource Sharing) Errors: If you are running your application from a local file (e.g., by double-clicking `index.html`), your browser might block requests to the OpenWeatherMap API due to CORS. To fix this, you can:
    • Serve your application using a local web server (e.g., using Python’s `http.server` module, or a simple Node.js server).
    • Use a browser extension that disables CORS (for development purposes only; not recommended for production).
  • Typos: Carefully check for typos in your code, especially in the API endpoint URLs, HTML element IDs, and variable names.
  • Console Errors: Open your browser’s developer console (usually by pressing F12) to check for any error messages. These messages can provide valuable clues about what’s going wrong.

Adding More Features and Enhancements

This is a basic weather application. Here are some ideas for adding more features and enhancements to improve the user experience and functionality:

  • Error Handling: Implement more robust error handling. Display more informative error messages to the user if the API request fails or if the city name is invalid.
  • Loading Indicators: Show a loading indicator (e.g., a spinner) while the weather data is being fetched. This improves the user experience.
  • Unit Conversion: Allow the user to switch between Celsius and Fahrenheit.
  • Geolocation: Use the browser’s geolocation API to automatically detect the user’s location and display the weather for their current city.
  • Advanced Weather Data: Display additional weather information, such as humidity, wind speed, and pressure.
  • Weather Forecast: Extend the application to display a weather forecast for the next few days.
  • User Interface Improvements: Improve the user interface with better styling, layout, and visual elements. Use a CSS framework like Bootstrap or Tailwind CSS to speed up development.
  • Search History: Store the user’s search history in local storage to allow them to quickly access previously viewed weather data.
  • Accessibility: Ensure the application is accessible to users with disabilities by using semantic HTML, providing alt text for images, and ensuring proper color contrast.
  • Testing: Write unit tests and integration tests to ensure the application’s functionality.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building weather apps (and how to fix them):

  • Incorrect API Key: The most common issue is using an incorrect or invalid API key. Solution: Double-check your API key in your code and ensure it matches the key on your OpenWeatherMap account. Also, verify that the API key is activated and that you are not exceeding any rate limits.
  • CORS Issues: As mentioned earlier, CORS errors can prevent your app from fetching data from the API. Solution: Serve your application using a local web server or configure CORS correctly on your server-side (if applicable).
  • Typographical Errors: Typos in the API endpoint URLs, HTML element IDs, or variable names can lead to errors. Solution: Carefully review your code for typos. Use your code editor’s auto-completion features to reduce the risk of typos.
  • Uncaught Errors: Not handling errors properly can lead to a poor user experience. Solution: Implement `try…catch` blocks to handle potential errors, such as network issues or invalid API responses. Display informative error messages to the user.
  • Incorrect Data Parsing: The OpenWeatherMap API returns data in JSON format. If you try to access data elements incorrectly, your app will break. Solution: Use `console.log(weatherData)` to inspect the structure of the JSON response and correctly access the data elements you need.
  • Ignoring Type Safety: Not using TypeScript’s type checking features can lead to runtime errors. Solution: Use type annotations (e.g., `city: string`, `data: any`) to define the types of variables and function parameters. This helps catch errors during development. Use type assertions (e.g., `as HTMLButtonElement`) to help TypeScript understand the types of DOM elements.
  • Not Updating the UI Properly: Forgetting to update the UI with the fetched weather data, or updating it incorrectly. Solution: Ensure that you are correctly selecting the HTML elements and updating their content with the correct weather information. Use `console.log` statements to check the values of variables and the DOM elements.

Key Takeaways and Summary

This tutorial has provided a comprehensive guide to building a simple interactive weather application using TypeScript. We’ve covered the essential steps, from setting up the development environment and fetching weather data from an API to displaying the data in a user-friendly interface. You’ve learned how to handle API responses, interact with HTML elements, and implement basic error handling. We have also discussed common mistakes and how to fix them, as well as ideas for further enhancements.

Here’s a recap of the key takeaways:

  • TypeScript Fundamentals: You’ve gained practical experience with TypeScript’s features, such as static typing, asynchronous functions, and type assertions.
  • API Integration: You’ve learned how to fetch data from a REST API using the `fetch` API.
  • DOM Manipulation: You’ve learned how to interact with HTML elements and update the user interface dynamically.
  • Error Handling: You’ve learned the importance of error handling and how to implement it using `try…catch` blocks.
  • Project Structure: You’ve learned how to structure a basic web application project.

FAQ

Here are some frequently asked questions about building a weather app with TypeScript:

  1. Can I use a different weather API? Yes, you can. The core concepts of fetching data and displaying it in the UI will remain the same. You’ll need to adapt the code to the specific API’s endpoint URLs and data structure. Be sure to check the API’s documentation.
  2. How do I deploy this app? You can deploy your app to a web hosting service like Netlify, Vercel, or GitHub Pages. You’ll need to build your TypeScript code (using `tsc`) and upload the compiled `index.html`, `index.js`, and any other necessary files.
  3. How can I make the app responsive? Use CSS media queries to make the application responsive and adapt to different screen sizes. Consider using a CSS framework like Bootstrap or Tailwind CSS to help with responsiveness.
  4. How do I handle user authentication? User authentication is beyond the scope of this simple weather app. You would typically use a backend server and implement authentication mechanisms like JWT (JSON Web Tokens) or OAuth.
  5. How can I improve the performance of the app? You can optimize the performance by:
    • Caching API responses.
    • Minifying and bundling your JavaScript code.
    • Using image optimization techniques.
    • Lazy loading images.

The journey of building this weather application is a practical introduction to the power and flexibility of TypeScript, providing a solid foundation for more complex web development projects. By understanding the core concepts and techniques presented in this tutorial, you are well-equipped to tackle more advanced challenges and build even more sophisticated applications. Remember that continuous practice and experimentation are key to mastering any programming language. Keep exploring, keep building, and keep learning!

More posts