In today’s interconnected world, access to real-time weather information is more crucial than ever. From planning your day to understanding global climate patterns, a reliable weather app is an invaluable tool. This tutorial will guide you through building a simple, yet functional, web-based weather application using TypeScript. We’ll cover everything from fetching data from a weather API to displaying it in a user-friendly format. This project is ideal for beginners and intermediate developers looking to enhance their TypeScript skills and build something practical.

Why Build a Weather App?

Creating a weather app offers several benefits. Firstly, it allows you to practice essential web development concepts such as:

• API interaction: Learn how to fetch data from external APIs.
• Data handling: Understand how to parse and manipulate JSON data.
• UI design: Practice creating a clean and user-friendly interface.
• TypeScript fundamentals: Reinforce your understanding of types, interfaces, and classes.

Secondly, it provides a tangible project to showcase your skills. Finally, it’s a fun and engaging way to learn. Instead of just reading about concepts, you’ll be actively applying them to build something useful.

Prerequisites

Before we begin, ensure you have the following:

• Basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is essential.
• Node.js and npm (or yarn) installed: You’ll need these to manage project dependencies.
• A code editor: Visual Studio Code (VS Code) is highly recommended.
• A weather API key: You’ll need to sign up for a free API key from a weather service provider. We’ll use OpenWeatherMap in this tutorial. Sign up at OpenWeatherMap.

Setting Up the Project

Let’s start by setting up our project:

1. Create a project directory: Open your terminal and create a new directory for your project, for example, `weather-app`.
2. Initialize the project: Navigate to the project directory in your terminal and run `npm init -y`. This creates a `package.json` file.
3. Install TypeScript: Install TypeScript as a development dependency: `npm install –save-dev typescript`.
4. Create a `tsconfig.json` file: Run `npx tsc –init` in your terminal. This creates a `tsconfig.json` file, which configures TypeScript for your project.
5. Create project files: Create the following files in your project directory:
   • `index.html`: The HTML file for your app.
   • `src/index.ts`: The main TypeScript file.
   • `src/styles.css`: The CSS file for styling.

HTML Structure (`index.html`)

Let’s create the basic HTML structure for our weather app. This will include a search input, a button, and a container to display the weather information.

“`html

“`

CSS Styling (`src/styles.css`)

Add some basic CSS to style the app. This is a simple example; feel free to customize it further.

“`css
body {
font-family: sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

.container {
background-color: white;
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;
}

#weatherInfo {
margin-top: 20px;
}
“`

TypeScript Implementation (`src/index.ts`)

This is where the core logic of our weather app resides. We’ll fetch weather data from the API, parse the JSON response, and display the relevant information. Let’s break this down step-by-step.

1. Define Types and Interfaces

Start by defining the types and interfaces for the data we’ll be working with. This improves code readability and helps prevent errors.

“`typescript
interface WeatherData {
name: string;
main: {
temp: number;
humidity: number;
};
weather: {
description: string;
icon: string;
}[];
wind: {
speed: number;
};
}
“`

This `WeatherData` interface defines the structure of the data we expect to receive from the weather API. It includes properties for the city name, temperature, humidity, weather description, weather icon, and wind speed.

2. API Key and Base URL

Store your API key and the base URL for the OpenWeatherMap API. Replace `YOUR_API_KEY` with your actual API key.

“`typescript
const apiKey = “YOUR_API_KEY”;
const apiUrl = “https://api.openweathermap.org/data/2.5/weather”;
“`

3. Fetch Weather Data Function

Create an asynchronous function to fetch the weather data. This function takes a city name as input and returns a `Promise` that resolves to the `WeatherData` interface, or `null` if there’s an error.

“`typescript
async function getWeatherData(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: WeatherData = await response.json();
return data;
} catch (error: any) {
console.error(“Error fetching weather data:”, error);
alert(`Error fetching weather data: ${error.message}`); // Display error to the user
return null;
}
}
“`

This `getWeatherData` function uses the `fetch` API to make a request to the OpenWeatherMap API. It includes error handling to manage potential issues during the API call.

4. Display Weather Information Function

This function takes the `WeatherData` and updates the HTML to display the information.

“`typescript
function displayWeather(data: WeatherData) {
const weatherInfoDiv = document.getElementById(“weatherInfo”) as HTMLElement;
if (!weatherInfoDiv) return;

const weatherDescription = data.weather[0].description;
const temperature = data.main.temp;
const humidity = data.main.humidity;
const windSpeed = data.wind.speed;
const cityName = data.name;
const iconCode = data.weather[0].icon;
const iconUrl = `http://openweathermap.org/img/w/${iconCode}.png`;

weatherInfoDiv.innerHTML = `

${cityName}

Description: ${weatherDescription}

Temperature: ${temperature}°C

Humidity: ${humidity}%

Wind Speed: ${windSpeed} m/s

`;
}
“`

The `displayWeather` function takes the weather data and dynamically updates the content of the `weatherInfo` div. It displays the city name, weather description, temperature, humidity, and wind speed.

5. Event Listener and Main Function

Add an event listener to the search button to trigger the weather data fetching process.

“`typescript
async function main() {
const searchButton = document.getElementById(“searchButton”) as HTMLButtonElement;
const cityInput = document.getElementById(“cityInput”) as HTMLInputElement;

if (!searchButton || !cityInput) return;

searchButton.addEventListener(“click”, async () => {
const city = cityInput.value;
if (city) {
const weatherData = await getWeatherData(city);
if (weatherData) {
displayWeather(weatherData);
}
}
});
}

main();
“`

The `main` function sets up an event listener for the search button. When the button is clicked, it retrieves the city name from the input field, calls the `getWeatherData` function to fetch the weather information, and then calls the `displayWeather` function to show the results. The `main` function is then called to initialize the app.

6. Compile TypeScript

Open your terminal and run the following command to compile your TypeScript code into JavaScript:

“`bash
npx tsc
“`

This command uses the TypeScript compiler (`tsc`) to transpile your `index.ts` file into `index.js`, which is then included in your `index.html` file.

Common Mistakes and Solutions

1. API Key Errors

Mistake: Forgetting to include your API key or using an incorrect one. This will result in an error from the weather API.

Solution: Double-check your API key and ensure it’s correctly placed in the code. Also, make sure that the API key has not expired. You can test your API key by making a direct request to the API in your browser using the correct URL and parameters.

2. CORS Issues

Mistake: You might encounter CORS (Cross-Origin Resource Sharing) errors if the browser blocks requests to the weather API. This can happen if your HTML file is opened directly from your file system (e.g., by double-clicking it) instead of being served by a web server.

Solution: To fix CORS issues, you can:

• Use a web server: Serve your HTML file using a local web server. You can use a simple server like `http-server` (installable via `npm install -g http-server`) and run it from your project directory.
• Enable CORS on the API: If you have control over the API, configure it to allow requests from your domain.
• Use a proxy: Create a proxy server on your own domain to forward requests to the weather API. This avoids the browser’s CORS restrictions.

3. Type Errors

Mistake: Not defining types correctly or using incorrect data types can lead to runtime errors.

Solution: Carefully define your interfaces and types to match the structure of the data you expect from the API. Use the TypeScript compiler to catch type errors early during development. Use the `as` keyword to type-cast elements retrieved from the DOM.

4. UI Updates Issues

Mistake: Incorrectly updating the DOM or not handling elements correctly can lead to the app not displaying the weather data.

Solution: Make sure you have correctly selected the HTML elements and that you’re correctly updating their `innerHTML` or other properties to display the weather information. Use the browser’s developer tools to inspect the elements and check for any errors in the console.

Enhancements

Here are some ways you can enhance your weather app:

• Add error handling: Implement more robust error handling to handle API errors and display user-friendly messages.
• Implement a loading indicator: Show a loading spinner while fetching data from the API.
• Add location-based weather: Use the browser’s geolocation API to automatically get the user’s location.
• Implement unit conversion: Allow users to switch between Celsius and Fahrenheit.
• Add more weather details: Display additional information like the feels-like temperature, sunrise/sunset times, and more.
• Improve UI/UX: Enhance the design and user experience with CSS and JavaScript animations.
• Use a different weather API: Experiment with other weather API providers.

Key Takeaways

• You’ve learned how to fetch data from an external API using `fetch`.
• You’ve practiced working with JSON data and TypeScript interfaces.
• You’ve built a functional web application that displays real-time weather information.
• You’ve gained experience with basic UI design and event handling.

Frequently Asked Questions (FAQ)

1. How do I get an API key?

   You can obtain a free API key from OpenWeatherMap by signing up on their website.

2. Why am I getting a CORS error?

   CORS errors occur when the browser blocks requests from your application to the weather API. This often happens when you open your HTML file directly from your file system. Use a local web server or a proxy to resolve this issue.

3. How can I style the weather app?

   You can use CSS to style your weather app. Modify the `src/styles.css` file to customize the appearance of the app.

4. Can I use a different weather API?

   Yes, you can. You’ll need to modify the code to work with the API you choose, including updating the API URL, data structure, and any authentication requirements.

5. What are some good tools for debugging?

   Use your browser’s developer tools (usually accessed by pressing F12 or right-clicking and selecting “Inspect”) to debug your application. Check the console for errors and use the network tab to examine API requests and responses.

This weather app is just the beginning. By understanding the fundamentals and experimenting with different features and enhancements, you can create even more sophisticated and useful web applications. Continuously practicing and exploring new technologies will allow you to build more complex applications, solidifying your skills in TypeScript and web development. The possibilities are vast, and with each project, you will continue to learn and improve.