Why TypeScript over JavaScript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

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

Consider this TypeScript code snippet. What will it output when compiled and run?

Typescript

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

A Hello, world!

B Hello, WORLD!

C TypeError at runtime

D Compilation error due to type mismatch

💡 Hint

Look at how the string method toUpperCase() is used on a typed parameter.

The function greet expects a string and calls toUpperCase() on it, which converts 'world' to 'WORLD'. The output is 'Hello, WORLD!'.

🧠 Conceptual

intermediate

Why does TypeScript help catch errors earlier than JavaScript?

Which of these best explains why TypeScript can catch errors before running the code?

A Because TypeScript runs code faster than JavaScript engines.

B Because TypeScript uses a different syntax that JavaScript engines ignore.

C Because TypeScript checks types during compilation, preventing type errors before runtime.

D Because TypeScript automatically fixes all bugs in the code.

💡 Hint

Think about what happens before the program runs.

TypeScript performs static type checking during compilation, which helps find type-related errors early, unlike JavaScript which checks types only at runtime.

🔧 Debug

advanced

What error does this TypeScript code produce?

Look at this TypeScript code. What error will the compiler show?

Typescript

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

const result = add(5, "10");
console.log(result);

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

B Syntax error: Missing semicolon

C Runtime error: Cannot add number and string

D No error, outputs 15

💡 Hint

Check the types of arguments passed to the function.

The function expects two numbers, but a string is passed as the second argument. TypeScript compiler flags this as a type error.

🚀 Application

advanced

How does TypeScript improve code maintainability in large projects?

Which option best describes how TypeScript helps maintain large codebases?

A By removing the need for any testing in the project.

B By automatically generating documentation for all functions.

C By running code faster in browsers than JavaScript.

D By enforcing explicit types, it makes code easier to understand and refactor safely.

💡 Hint

Think about how clear types help developers.

Explicit types in TypeScript provide clear contracts for functions and variables, making it easier to understand, refactor, and avoid bugs in large projects.

❓ Predict Output

expert

What is the output of this TypeScript code using interfaces and optional properties?

Analyze this TypeScript code and select the correct output.

Typescript

interface User {
  name: string;
  age?: number;
}

function describe(user: User) {
  return `Name: ${user.name}, Age: ${user.age ?? 'unknown'}`;
}

console.log(describe({ name: 'Alice' }));

A Name: Alice, Age: unknown

B Name: Alice, Age: undefined

C Name: Alice, Age: 0

D Compilation error: Missing age property

💡 Hint

Look at how the optional age property is handled with the nullish coalescing operator.

The age property is optional and not provided, so user.age is undefined. The nullish coalescing operator (??) replaces undefined with 'unknown'.