Why type annotations are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with type annotations?

Look at this TypeScript code. What will it print when run?

Typescript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("Alice"));

A SyntaxError

B Hello, Alice!

C TypeError at runtime

D Hello, undefined!

💡 Hint

Think about what the function returns and the argument passed.

The function greet takes a string and returns a greeting string. Passing "Alice" returns "Hello, Alice!".

🧠 Conceptual

intermediate

Why do we use type annotations in TypeScript?

Which of these is the main reason to use type annotations in TypeScript?

A To reduce the file size of the code

B To make the code run faster

C To catch errors before running the code

D To make the code look prettier

💡 Hint

Think about when errors are found in TypeScript compared to JavaScript.

Type annotations help the TypeScript compiler find mistakes before the program runs, making code safer.

❓ Predict Output

advanced

What error does this TypeScript code raise without type annotations?

Consider this TypeScript code without type annotations. What error will it cause?

Typescript

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

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

A 510

B 15

C TypeError at runtime

D Compilation error due to missing types

💡 Hint

Think about what happens when you add a number and a string in JavaScript.

Without type annotations, add(5, "10") concatenates as string, resulting in "510".

🔧 Debug

advanced

Identify the error caused by missing type annotations

What error will this TypeScript code produce when compiled?

Typescript

function multiply(a: number, b: number) {
  return a * b;
}

console.log(multiply(4, "3"));

A Compilation error: Argument of type 'string' is not assignable to parameter of type 'number'.

B Runtime error: Cannot multiply number and string

C Output: 12

D No error, outputs '43'

💡 Hint

Check the types of arguments passed to the function.

TypeScript catches the wrong argument type at compile time because of type annotations.

🚀 Application

expert

How do type annotations improve code maintenance?

Choose the best explanation of how type annotations help maintain large TypeScript projects.

A They allow the program to run without any testing.

B They automatically fix bugs in the code without developer input.

C They speed up the program execution by optimizing machine code.

D They make it easier to understand what data types functions expect and return, reducing bugs when changing code.

💡 Hint

Think about how clear type information helps developers work on code safely.

Type annotations serve as clear documentation and help tools catch mistakes early, making code easier to maintain.