What is TypeScript - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is TypeScript mainly used for?

TypeScript is a programming language that is a superset of JavaScript. What is its main purpose?

A To add static types and catch errors before running the code

B To style web pages with colors and layouts

C To replace HTML for building web pages

D To run JavaScript code faster in the browser

💡 Hint

Think about what TypeScript adds to JavaScript to help developers.

TypeScript adds static typing to JavaScript, which helps catch errors early during development.

❓ Predict Output

intermediate

What is the output of this TypeScript code?

Consider this TypeScript code snippet:

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

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

What will it print?

Typescript

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

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

A TypeError at runtime

B Hello, world!

C Hello, WORLD!

D SyntaxError during compilation

💡 Hint

Look at how the toUpperCase() method changes the string.

The function converts the input string to uppercase, so "world" becomes "WORLD".

❓ Predict Output

advanced

What error does this TypeScript code raise?

Look at this TypeScript code:

let age: number = "30";

What error will the TypeScript compiler show?

Typescript

let age: number = "30";

A Type 'string' is not assignable to type 'number'.

B SyntaxError: Unexpected string

C No error, code runs fine

D ReferenceError: age is not defined

💡 Hint

Check the type declared and the value assigned.

TypeScript expects a number but got a string, so it reports a type mismatch error.

🧠 Conceptual

advanced

Which feature is unique to TypeScript compared to JavaScript?

Which of these features is only available in TypeScript and not in plain JavaScript?

A Loops to repeat actions

B Functions to perform calculations

C Variables to store data

D Interfaces to define object shapes

💡 Hint

Think about features that help describe data structures before running code.

Interfaces are a TypeScript feature to describe object shapes and types, not present in JavaScript.

🚀 Application

expert

What is the value of 'result' after running this TypeScript code?

Analyze this TypeScript code:

type User = { name: string; age: number };

const users: User[] = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 35 }
];

const result = users.filter(u => u.age > 28).map(u => u.name).join(", ");

console.log(result);

What will be printed?

Typescript

type User = { name: string; age: number };

const users: User[] = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Carol", age: 35 }
];

const result = users.filter(u => u.age > 28).map(u => u.name).join(", ");

console.log(result);

A Alice, Bob, Carol

B Bob, Carol

C Alice

D Error: Property 'age' does not exist

💡 Hint

Look at the filter condition and what is extracted after filtering.

The code filters users older than 28, which are Bob and Carol, then joins their names with a comma.

Practice

1. What is the main purpose of TypeScript?

easy

A. To replace JavaScript entirely with a new language

B. To style web pages with colors and fonts

C. To run code faster than JavaScript

D. To add types to JavaScript for better error checking

Solution

1. Step 1: Understand TypeScript's role

   TypeScript is designed to add types to JavaScript, helping catch errors before running the code.

2. Step 2: Compare options

   Only "To add types to JavaScript for better error checking" correctly describes this purpose. TypeScript does not replace JavaScript entirely with a new language, does not inherently run code faster, and is not for styling.

3. Final Answer:

   To add types to JavaScript for better error checking -> Option D

4. Quick Check:

   TypeScript adds types = B [OK]

Hint: Remember: TypeScript adds types to JavaScript [OK]

Common Mistakes:

• Thinking TypeScript replaces JavaScript
• Confusing TypeScript with CSS or styling
• Believing TypeScript runs code faster by itself

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 correct syntax to declare a typed variable is: let variableName: type = value;

2. Step 2: Check each option

   let age: number = 25; matches this syntax exactly. The other options have incorrect order or missing punctuation.

3. Final Answer:

   let age: number = 25; -> Option A

4. Quick Check:

   Correct typed variable syntax = D [OK]

Hint: Use colon after variable name for type in TypeScript [OK]

Common Mistakes:

• Placing type before variable name
• Missing colon between name and type
• Incorrect order of type and value

3. What will be the output of this TypeScript code?

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

medium

A. Hello, Alice!

B. Hello, name!

C. Error: name is not defined

D. Hello, ${name}!

Solution

1. Step 1: Understand the function behavior

   The function greet takes a string parameter and returns a greeting using template literals to insert the name.

2. Step 2: Evaluate the console.log output

   Calling greet("Alice") returns "Hello, Alice!" which is printed to the console.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Template literal output = Hello, Alice! [OK]

Hint: Template literals insert variables with ${} [OK]

Common Mistakes:

• Confusing string interpolation syntax
• Expecting variable name printed literally
• Thinking function throws error

4. Identify the error in this TypeScript code:

let count: number = "10";

medium

A. Variable name 'count' is reserved

B. Missing semicolon at the end

C. Type mismatch: assigning string to number variable

D. No error, code is correct

Solution

1. Step 1: Check variable type and value

   The variable count is declared as a number but assigned a string "10".

2. Step 2: Understand TypeScript type checking

   TypeScript does not allow assigning a string to a number type variable, causing a type mismatch error.

3. Final Answer:

   Type mismatch: assigning string to number variable -> Option C

4. Quick Check:

   Type mismatch error = A [OK]

Hint: Match variable type and assigned value exactly [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Thinking semicolon missing causes error here
• Assuming variable names are reserved

5. You want to write TypeScript code that only accepts a number or a string as input and returns a string describing the input type. Which code snippet correctly uses TypeScript types to do this?

hard

A. function describe(input): string {
return `Input is a ${typeof input}`;
}

B. function describe(input: number | string): string {
return `Input is a ${typeof input}`;
}

C. function describe(input: any): number {
return typeof input;
}

D. function describe(input: number & string): string {
return `Input is a ${typeof input}`;
}

Solution

1. Step 1: Understand union types in TypeScript

   To accept either number or string, use the union type: number | string.

2. Step 2: Check return type and function body

   The function returns a string describing the input type using typeof. function describe(input: number | string): string { return `Input is a ${typeof input}`; } correctly types input and return value.

3. Step 3: Analyze other options

   function describe(input): string { return `Input is a ${typeof input}`; } lacks input type, losing type safety. function describe(input: any): number { return typeof input; } returns number but should return string. function describe(input: number & string): string { return `Input is a ${typeof input}`; } uses intersection number & string which is impossible.

4. Final Answer:

   function describe(input: number | string): string { return `Input is a ${typeof input}`; } -> Option B

5. Quick Check:

   Use union types for multiple input types = A [OK]

Hint: Use | for union types to accept multiple types [OK]

Common Mistakes:

• Using & instead of | for union types
• Omitting input type annotation
• Returning wrong type from function