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

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

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

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

Hint

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

Practice

1. Why do many developers choose TypeScript over plain JavaScript?

easy

A. Because TypeScript uses fewer lines of code than JavaScript

B. Because TypeScript runs faster in browsers than JavaScript

C. Because TypeScript does not require any compilation

D. Because TypeScript helps catch errors before running the code

Solution

1. Step 1: Understand TypeScript's main benefit

   TypeScript adds types to JavaScript, which helps find mistakes early, before running the code.

2. Step 2: Compare options with this benefit

   Only Because TypeScript helps catch errors before running the code mentions catching errors early, which is the key reason developers prefer TypeScript.

3. Final Answer:

   Because TypeScript helps catch errors before running the code -> Option D

4. Quick Check:

   Type safety = Catch errors early [OK]

Hint: Remember: TypeScript finds bugs before running code [OK]

Common Mistakes:

• Thinking TypeScript runs faster in browsers
• Believing TypeScript needs no compilation
• Assuming TypeScript always reduces code length

2. Which of the following is the correct way to declare a typed variable in TypeScript?

easy

A. let age = number 25;

B. let age: number = 25;

C. let age = 25: number;

D. let age number = 25;

Solution

1. Step 1: Recall TypeScript variable syntax

   In TypeScript, the type comes after the variable name, separated by a colon, like let varName: type.

2. Step 2: Check each option's syntax

   Only let age: number = 25; uses the correct syntax: let age: number = 25;. Others have misplaced or missing colons.

3. Final Answer:

   let age: number = 25; -> Option B

4. Quick Check:

   Variable: type = value [OK]

Hint: Type comes after variable name with colon [OK]

Common Mistakes:

• Placing type before variable name
• Using colon after value instead of after variable
• Omitting colon between variable and type

3. What will be the output of this TypeScript code after compilation and running in JavaScript?

function greet(name: string) {
  return `Hello, ${name.toUpperCase()}!`;
}
console.log(greet("world"));

medium

A. Hello, WORLD!

B. Error: name.toUpperCase is not a function

C. HELLO, WORLD!

D. Hello, world!

Solution

1. Step 1: Understand the function behavior

   The function takes a string and returns "Hello, " plus the uppercase version of the name plus "!".

2. Step 2: Apply the function to input "world"

   Calling name.toUpperCase() on "world" returns "WORLD", so the output is "Hello, WORLD!".

3. Final Answer:

   Hello, WORLD! -> Option A

4. Quick Check:

   toUpperCase("world") = "WORLD" [OK]

Hint: Remember string methods like toUpperCase() work on strings [OK]

Common Mistakes:

• Ignoring toUpperCase effect
• Assuming output is all uppercase
• Expecting runtime error due to types

4. Identify the error in this TypeScript code snippet:

function add(a: number, b: number) {
  return a + b;
}

console.log(add(5, "10"));

medium

A. Type error: second argument should be a number, not a string

B. No error, outputs 15

C. Syntax error: missing return type

D. Runtime error: cannot add number and string

Solution

1. Step 1: Check function parameter types

   The function expects both parameters to be numbers.

2. Step 2: Analyze the call with arguments (5, "10")

   The second argument is a string, which conflicts with the expected number type, causing a TypeScript type error before running.

3. Final Answer:

   Type error: second argument should be a number, not a string -> Option A

4. Quick Check:

   Type mismatch argument = Error [OK]

Hint: Check argument types match parameter types [OK]

Common Mistakes:

• Assuming implicit string to number conversion
• Thinking missing return type causes error
• Expecting runtime error instead of compile-time

5. You want to create a function in TypeScript that accepts either a string or a number and returns its string length or digit count. Which approach best uses TypeScript's features to handle this safely?

hard

A. Declare two separate functions, one for string and one for number

B. Declare the parameter as type any and convert it to string inside

C. Use a union type for the parameter and check its type inside the function

D. Use JavaScript without types to avoid complexity

Solution

1. Step 1: Understand TypeScript union types

   Union types allow a variable to be one of several types, e.g., string | number.

2. Step 2: Use type checking inside function

   Inside the function, use typeof to check if the input is string or number, then handle accordingly. This keeps type safety and clarity.

3. Final Answer:

   Use a union type for the parameter and check its type inside the function -> Option C

4. Quick Check:

   Union types + type guards = safe handling [OK]

Hint: Use union types and type checks for multiple input types [OK]

Common Mistakes:

• Using any type loses type safety
• Creating duplicate functions unnecessarily
• Avoiding TypeScript features by using plain JavaScript