TypeScript Tutorial: Creating a Simple Interactive Weather App

Written by

learnmodernjavascript

in

In today’s fast-paced world, staying informed about the weather is more crucial than ever. From planning your day to ensuring your safety, knowing the current and predicted conditions is a must. Building a weather application might seem daunting, 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 clear explanations, practical code examples, and valuable insights to help you build your own weather app.

Why Build a Weather App with TypeScript?

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

  • Type Safety: TypeScript’s static typing helps catch errors during development, reducing the likelihood of runtime bugs and making your code more reliable.
  • Code Completion and Refactoring: TypeScript provides excellent code completion and refactoring support in most IDEs, which speeds up development and makes it easier to maintain your codebase.
  • Improved Readability: TypeScript’s type annotations and interfaces make your code more readable and easier to understand, especially for complex projects.
  • Scalability: TypeScript is designed to handle large projects, making it a good choice for building applications that may grow over time.

By using TypeScript, you’ll not only learn how to build a weather app but also gain valuable skills that can be applied to a wide range of software development projects.

Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need the following:

  • Node.js and npm (Node Package Manager): These are essential for managing dependencies and running your TypeScript code. You can download them from the official Node.js website.
  • A Code Editor: Choose your preferred code editor (e.g., Visual Studio Code, Sublime Text, Atom). Most editors have excellent TypeScript support.
  • TypeScript Compiler: Install the TypeScript compiler globally using npm: npm install -g typescript

Once you have these installed, create a new project directory and navigate into it using your terminal. Then, initialize a new npm project by running npm init -y. This will create a package.json file in your project directory.

Project Structure

Let’s create a basic project structure to organize our files:

weather-app/
├── src/
│   ├── index.ts
│   └── styles.css
├── index.html
├── package.json
├── tsconfig.json
└── README.md

In the src directory, we’ll keep our TypeScript files. index.html will hold our HTML structure, and styles.css will contain our CSS styles. The tsconfig.json file will configure the TypeScript compiler. Finally, README.md will contain project documentation.

Configuring TypeScript (tsconfig.json)

The tsconfig.json file tells the TypeScript compiler how to compile your code. Create this file in the root of your project with the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Let’s break down the important options:

  • target: "es5": Specifies the JavaScript version to compile to.
  • module: "commonjs": Specifies the module system to use.
  • outDir: "./dist": Specifies the output directory for the compiled JavaScript files.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Specifies the files to include in the compilation.

Creating the HTML Structure (index.html)

Now, let’s create the basic HTML structure for our weather app. Create an index.html file in the root of your project 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="styles.css">
</head>
<body>
    <div class="container">
        <h1>Weather App</h1>
        <div class="search-box">
            <input type="text" id="cityInput" placeholder="Enter city">
            <button id="searchButton">Search</button>
        </div>
        <div id="weatherInfo"></div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides a basic layout with a title, a search box for entering the city, and a div to display the weather information. It also includes links to our CSS and JavaScript files.

Styling the App (styles.css)

To make our app look presentable, add some basic styles to the styles.css file:


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;
}

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

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

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

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

#weatherInfo {
    margin-top: 20px;
}

This CSS provides a basic layout, including styling for the container, search box, input field, and button.

Writing the TypeScript Code (index.ts)

Now, let’s write the core TypeScript code for our weather app. Open src/index.ts and add the following code:


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

// API Key (Replace with your actual API key)
const apiKey: string = 'YOUR_API_KEY';
const apiUrl: string = 'https://api.openweathermap.org/data/2.5/weather?units=metric&q=';

// Get DOM elements
const cityInput: HTMLInputElement | null = document.getElementById('cityInput') as HTMLInputElement;
const searchButton: HTMLButtonElement | null = document.getElementById('searchButton') as HTMLButtonElement;
const weatherInfo: HTMLDivElement | null = document.getElementById('weatherInfo') as HTMLDivElement;

// Function to fetch weather data
async function getWeather(city: string): Promise<WeatherData | null> {
  try {
    const response = await fetch(`${apiUrl}${city}&appid=${apiKey}`);
    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.message || 'An error occurred while fetching weather data.');
    return null;
  }
}

// Function to display weather information
function displayWeather(data: WeatherData) {
  if (!weatherInfo) return;

  const { name, main, weather, wind } = data;
  const iconCode: string = weather[0].icon;
  const iconUrl: string = `http://openweathermap.org/img/w/${iconCode}.png`;

  weatherInfo.innerHTML = `
    <h2>${name}</h2>
    <img src="${iconUrl}" alt="Weather Icon">
    <p>Temperature: ${main.temp}°C</p>
    <p>Humidity: ${main.humidity}%</p>
    <p>Description: ${weather[0].description}</p>
    <p>Wind Speed: ${wind.speed} m/s</p>
  `;
}

// Event listener for the search button
if (searchButton) {
  searchButton.addEventListener('click', async () => {
    if (!cityInput || !cityInput.value) {
      alert('Please enter a city name.');
      return;
    }
    const city: string = cityInput.value;
    const weatherData: WeatherData | null = await getWeather(city);
    if (weatherData) {
      displayWeather(weatherData);
    }
  });
}

Let’s break down the code:

  • WeatherData Interface: This interface defines the structure of the weather data we’ll receive from the API. It ensures type safety and makes our code more readable.
  • API Key and URL: Replace 'YOUR_API_KEY' with your actual API key from OpenWeatherMap. The apiUrl is the base URL for the OpenWeatherMap API.
  • DOM Element Selection: We get references to the HTML elements we’ll be interacting with. Type assertions (e.g., as HTMLInputElement) are used to tell TypeScript the specific type of the element.
  • getWeather Function: This asynchronous function fetches weather data from the OpenWeatherMap API using the fetch API. It handles potential errors and returns the weather data or null if an error occurs.
  • displayWeather Function: This function takes the weather data and dynamically creates HTML to display the weather information in the weatherInfo div.
  • Event Listener: An event listener is attached to the search button. When the button is clicked, it gets the city name from the input field, calls the getWeather function, and then calls the displayWeather function to display the results.

Compiling and Running the App

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

tsc

This command will compile your .ts files into .js files in the dist directory. Now, open index.html in your browser. You should see the basic layout of the app. Enter a city name and click the search button. The app will fetch and display the weather information for that city.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect API Key: Make sure you have a valid API key from OpenWeatherMap and that you’ve replaced 'YOUR_API_KEY' with your actual key in the code.
  • Network Errors: Double-check your internet connection. If you’re still having trouble, the API might be temporarily unavailable.
  • CORS Errors: If you’re running your HTML file directly from your file system (e.g., by double-clicking it), you might encounter CORS (Cross-Origin Resource Sharing) errors. To avoid this, serve your app using a local web server. You can use a simple server like the http-server package (npm install -g http-server) and run it in your project directory (http-server).
  • Type Errors: TypeScript will highlight any type errors in your code. Make sure you’re using the correct types for variables and function parameters. Review the error messages and fix the code accordingly.
  • Incorrect Element Selection: If you are getting a null error when selecting an element, verify that the element id matches the one in the javascript. Also, make sure that the script tag in your HTML file is placed after the elements you are trying to select.

Enhancements and Further Development

Once you have a working weather app, you can add many enhancements, such as:

  • Error Handling: Implement more robust error handling to provide better feedback to the user.
  • Loading Indicators: Show a loading indicator while the weather data is being fetched.
  • User Interface Improvements: Improve the user interface with more styling and better layout.
  • Geolocation: Implement geolocation to automatically detect the user’s location and display the weather for that location.
  • Multiple Days Forecast: Extend the application to display the weather forecast for multiple days.
  • Units Conversion: Add functionality to switch between Celsius and Fahrenheit.
  • Caching: Implement caching to reduce the number of API calls and improve performance.

Key Takeaways

  • TypeScript enhances code quality and reduces errors.
  • APIs are used to fetch real-time data.
  • DOM manipulation is used to render data dynamically.
  • Error handling is crucial for a user-friendly experience.

FAQ

Q: What is an API key, and why do I need one?
A: An API key is a unique identifier that allows you to access a third-party service (like OpenWeatherMap). It’s used to authenticate your requests and track your usage. You need an API key to access the OpenWeatherMap API.

Q: Where can I get an API key for OpenWeatherMap?
A: You can sign up for a free API key on the OpenWeatherMap website. You will need to create an account and then generate an API key from your account dashboard.

Q: What is CORS, and how do I fix CORS errors?
A: CORS (Cross-Origin Resource Sharing) is a security mechanism that restricts web pages from making requests to a different domain than the one that served the web page. If you encounter CORS errors, you can either configure your web server to allow cross-origin requests or use a proxy server to forward your requests.

Q: How can I debug my TypeScript code?
A: You can debug your TypeScript code using your browser’s developer tools (e.g., Chrome DevTools). Set breakpoints in your code and step through it to identify and fix any issues. You can also use the console.log() function to print values to the console.

Q: How can I deploy my weather app?
A: You can deploy your weather app to a variety of platforms, such as Netlify, Vercel, or GitHub Pages. These platforms provide a simple way to host your web application for free or at a low cost.

Building a weather app is a practical way to learn TypeScript, interact with APIs, and understand the fundamentals of web development. By following this tutorial, you’ve created a functional application that can be expanded upon and customized to fit your specific needs. The combination of TypeScript’s type safety, clear coding practices, and the use of APIs allows for a robust and user-friendly experience. The basic structure provided here is merely a starting point, and the real value lies in the potential for customization and feature enhancements, allowing you to create something truly your own. The application’s ability to fetch and present real-time weather information illustrates how dynamic and interactive web applications are built, providing a solid foundation for further exploration into more complex web development projects.

More posts