Why TypeScript over JavaScript - See It in Action

Why TypeScript over JavaScript

📖 Scenario: Imagine you are building a small app that keeps track of your favorite movies and their ratings. You want to make sure the data is correct and easy to manage as your app grows.

🎯 Goal: You will create a simple TypeScript program that shows how TypeScript helps catch errors early and makes your code easier to understand compared to plain JavaScript.

📋 What You'll Learn

Create a TypeScript interface for a movie object

Create an array of movies using the interface

Write a function that calculates the average rating of the movies

Print the average rating

💡 Why This Matters

🌍 Real World

TypeScript is used in many real apps to make code safer and easier to maintain, especially as projects grow bigger.

💼 Career

Knowing TypeScript is valuable for jobs in web development because it helps teams avoid bugs and write clearer code.

1

Create a TypeScript interface for movies

Create an interface called Movie with two properties: title of type string and rating of type number.

Typescript

# Your code here

Need a hint?

Use the interface keyword to define the shape of a movie object.

2

Create an array of movies using the interface

Create a variable called movies of type Movie[] and assign it an array with these exact objects: { title: "Inception", rating: 9 }, { title: "Interstellar", rating: 8 }, and { title: "Dunkirk", rating: 7 }.

Typescript

interface Movie {
  title: string;
  rating: number;
}

# Your code here

Need a hint?

Use const movies: Movie[] = [...] to create the array with the exact movie objects.

3

Write a function to calculate average rating

Write a function called averageRating that takes a parameter movies of type Movie[] and returns a number. Use a for loop with variables movie to sum the ratings and then return the average.

Typescript

interface Movie {
  title: string;
  rating: number;
}

const movies: Movie[] = [
  { title: "Inception", rating: 9 },
  { title: "Interstellar", rating: 8 },
  { title: "Dunkirk", rating: 7 }
];

# Your code here

Need a hint?

Use a for loop to add all ratings, then divide by the number of movies.

4

Print the average rating

Write a console.log statement that prints the text "Average rating:" followed by the result of calling averageRating with the movies array.

Typescript

interface Movie {
  title: string;
  rating: number;
}

const movies: Movie[] = [
  { title: "Inception", rating: 9 },
  { title: "Interstellar", rating: 8 },
  { title: "Dunkirk", rating: 7 }
];

function averageRating(movies: Movie[]): number {
  let total = 0;
  for (const movie of movies) {
    total += movie.rating;
  }
  return total / movies.length;
}

# Your code here

Need a hint?

Use console.log("Average rating:", averageRating(movies)) to show the result.