Declaring functions and classes in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a class method call

What is the output of this TypeScript code?

Typescript

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return `Hello, ${this.greeting}`;
  }
}

const greeter = new Greeter("world");
console.log(greeter.greet());

A Error: Property 'greeting' does not exist

B Hello, undefined

C Hello, world

D Hello, message

💡 Hint

Look at how the constructor sets the greeting property and how greet() uses it.

The constructor sets the greeting property to 'world'. The greet() method returns 'Hello, ' plus the greeting property, so the output is 'Hello, world'.

❓ Predict Output

intermediate

Function return type and output

What will this TypeScript function return when called with argument 5?

Typescript

function multiplyByTwo(x: number): number {
  return x * 2;
}

console.log(multiplyByTwo(5));

A 10

B "10"

C undefined

D Error: Function must return a string

💡 Hint

Check the function's return statement and the argument passed.

The function multiplies the input number by 2 and returns it. For input 5, it returns 10.

🔧 Debug

advanced

Identify the error in this class declaration

What error does this TypeScript code produce?

Typescript

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet(): void {
    console.log('Hello, ' + this.names);
  }
}

const p = new Person('Alice');
p.greet();

A TypeError: Cannot read property 'names' of undefined

B SyntaxError: Unexpected token

C undefined

D ReferenceError: names is not defined

💡 Hint

Check the property name used inside the greet method.

The class has a property 'name', but the greet method tries to access 'this.names', which is undefined. This causes a TypeError at runtime.

📝 Syntax

advanced

Which option declares a valid function with default parameter?

Which of the following TypeScript function declarations is syntactically correct and sets a default value for parameter 'count'?

A function repeat(text: string, count?: number = 3): string { return text.repeat(count); }

B function repeat(text: string, count = 3): string { return text.repeat(count); }

C function repeat(text: string, count: number = 3?) { return text.repeat(count); }

D function repeat(text: string, count = 3?) { return text.repeat(count); }

💡 Hint

Default parameters are assigned with '=' without '?' after the parameter name.

Option B correctly assigns a default value to 'count'. Option B mixes optional and default syntax incorrectly. Options C and D have syntax errors with misplaced '?'.

🚀 Application

expert

Class inheritance and method overriding output

What is the output of this TypeScript code?

Typescript

class Animal {
  speak(): string {
    return 'Generic sound';
  }
}

class Dog extends Animal {
  speak(): string {
    return 'Woof';
  }
}

const pet: Animal = new Dog();
console.log(pet.speak());

A Error: Method speak not found

B Generic sound

C undefined

D Woof

💡 Hint

Think about which speak method runs when a Dog instance is assigned to an Animal type variable.

Even though the variable type is Animal, the actual object is Dog. The speak method in Dog overrides Animal's method, so 'Woof' is printed.

Practice

1. What is the main purpose of a function in TypeScript?

easy

A. To create a new type of variable

B. To store data without any behavior

C. To perform a specific task and optionally return a result

D. To define a constant value

Solution

1. Step 1: Understand what a function does

   A function is a block of code designed to perform a specific task.

2. Step 2: Recognize the role of return values

   Functions can return results after performing their task, making them reusable.

3. Final Answer:

   To perform a specific task and optionally return a result -> Option C

4. Quick Check:

   Function purpose = perform task + return result [OK]

Hint: Functions do tasks and can give back results [OK]

Common Mistakes:

• Confusing functions with variables
• Thinking functions only store data
• Believing functions cannot return values

2. Which of the following is the correct way to declare a function named greet that takes a string name and returns a string in TypeScript?

easy

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

B. function greet(name) { return 'Hello, ' + name; }

C. function greet(name: string) { console.log('Hello, ' + name); }

D. function greet(): string { return name; }

Solution

1. Step 1: Check function parameter and return types

   function greet(name: string): string { return `Hello, ${name}`; } correctly declares the parameter name as a string and the return type as string.

2. Step 2: Verify function body returns a string

   function greet(name: string): string { return `Hello, ${name}`; } returns a template string greeting the name, matching the return type.

3. Final Answer:

   function greet(name: string): string { return `Hello, ${name}`; } -> Option A

4. Quick Check:

   Correct parameter and return types = function greet(name: string): string { return `Hello, ${name}`; } [OK]

Hint: Specify parameter and return types explicitly [OK]

Common Mistakes:

• Omitting parameter types in TypeScript
• Not returning a value when return type is declared
• Using console.log instead of return

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

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    return `Hi, I am ${this.name}`;
  }
}
const p = new Person('Anna');
console.log(p.greet());

medium

A. Hi, I am Anna

B. Hi, I am undefined

C. Error: Property 'name' does not exist

D. Hi, I am

Solution

1. Step 1: Understand class construction

   The Person class sets this.name to the passed argument 'Anna' in the constructor.

2. Step 2: Analyze the greet method output

   The greet method returns a string including this.name, which is 'Anna'.

3. Final Answer:

   Hi, I am Anna -> Option A

4. Quick Check:

   Class property set correctly = 'Hi, I am Anna' [OK]

Hint: Constructor sets properties; methods use them [OK]

Common Mistakes:

• Forgetting to assign constructor parameter to this.name
• Expecting undefined because of missing this
• Confusing method return with console.log output

4. Identify the error in this TypeScript class declaration:

class Car {
  model: string;
  constructor(model) {
    this.model = model;
  }
  display() {
    console.log('Model: ' + this.model);
  }
}

medium

A. Property 'model' should be private

B. Missing return type for display method

C. Constructor should not have parameters

D. Missing type annotation for constructor parameter 'model'

Solution

1. Step 1: Check constructor parameter types

   In TypeScript, constructor parameters should have type annotations; here, model lacks a type.

2. Step 2: Verify other parts

   The display method does not require a return type annotation since it returns void implicitly.

3. Final Answer:

   Missing type annotation for constructor parameter 'model' -> Option D

4. Quick Check:

   Constructor parameters need types = Missing type annotation for constructor parameter 'model' [OK]

Hint: Always type constructor parameters in TypeScript [OK]

Common Mistakes:

• Omitting parameter types in constructors
• Thinking methods must always declare return types
• Assuming properties must be private by default

5. You want to create a TypeScript class Calculator with a method add that takes two numbers and returns their sum. Which code correctly implements this with proper types and usage?

hard

A. class Calculator {
add(a, b) {
return a + b;
}
}
const calc = Calculator();
console.log(calc.add(5, 3));

B. class Calculator {
add(a: number, b: number): number {
return a + b;
}
}
const calc = new Calculator();
console.log(calc.add(5, 3));

C. class Calculator {
add(a: number, b: number) {
console.log(a + b);
}
}
const calc = new Calculator();
calc.add(5, 3);

D. class Calculator {
add(a: number, b: number): number {
return a + b;
}
}
const calc = new Calculator();
console.log(calc.add('5', '3'));

Solution

1. Step 1: Check method declaration and types

   class Calculator { add(a: number, b: number): number { return a + b; } } const calc = new Calculator(); console.log(calc.add(5, 3)); declares add with parameters typed as numbers and return type number, which is correct.

2. Step 2: Verify object creation and method call

   class Calculator { add(a: number, b: number): number { return a + b; } } const calc = new Calculator(); console.log(calc.add(5, 3)); creates an instance with new Calculator() and calls add(5, 3), which returns 8.

3. Final Answer:

   Correct class with typed method and proper usage -> Option B

4. Quick Check:

   Typed method + new instance + correct call = class Calculator { add(a: number, b: number): number { return a + b; } } const calc = new Calculator(); console.log(calc.add(5, 3)); [OK]

Hint: Use 'new' to create class instances and type parameters [OK]

Common Mistakes:

• Calling class without 'new'
• Omitting parameter types
• Passing wrong argument types (like strings instead of numbers)