Why typed classes matter in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a typed class property.

Typescript

class Person {
  name: [1];
  constructor(name: string) {
    this.name = name;
  }
}

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean for a name property.

Using any which loses type safety.

The name property should be typed as string because it holds text.

2fill in blank

medium

Complete the code to add a typed method that returns the person's name.

Typescript

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  getName(): [1] {
    return this.name;
  }
}

Drag options to blanks, or click blank then click option'

Anumber

Bvoid

Cstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using void as return type when the method returns a value.

Using number or boolean which do not match the returned value.

The method getName returns the name which is a string, so its return type must be string.

3fill in blank

hard

Fix the error in the class by typing the age property correctly.

Typescript

class Person {
  name: string;
  age: [1];
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

Drag options to blanks, or click blank then click option'

Aany

Bboolean

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Typing age as string or boolean.

Using any which removes type safety.

The age property should be typed as number because it holds numeric data.

4fill in blank

hard

Fill both blanks to create a typed method that sets the person's age.

Typescript

class Person {
  age: number;
  setAge([1]: [2]) {
    this.age = age;
  }
}

Drag options to blanks, or click blank then click option'

Aage

Bstring

Cnumber

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different parameter name than age.

Typing the parameter as string instead of number.

The method parameter should be named age and typed as number to match the property.

5fill in blank

hard

Fill all three blanks to create a typed class with a constructor and a method that returns a greeting.

Typescript

class Person {
  name: [1];
  constructor(name: [2]) {
    this.name = name;
  }
  greet(): [3] {
    return `Hello, ${this.name}!`;
  }
}

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean types for name or return type.

Mismatching types between property and constructor parameter.

The name property and constructor parameter should be typed as string. The greet method returns a string greeting.

Practice

1. Why are typed classes important in TypeScript?

easy

A. They make the code run faster at runtime.

B. They allow writing code without any rules.

C. They help catch errors before running the code.

D. They remove the need for functions.

Solution

1. Step 1: Understand typed classes role

   Typed classes define what kind of data each property should hold, helping catch mistakes early.

2. Step 2: Identify the benefit

   This early error detection happens before running the program, improving code safety.

3. Final Answer:

   They help catch errors before running the code. -> Option C

4. Quick Check:

   Typed classes catch errors early = B [OK]

Hint: Typed classes catch mistakes early, not speed up runtime [OK]

Common Mistakes:

• Thinking typed classes speed up code execution
• Believing typed classes remove the need for functions
• Assuming typed classes allow ignoring data rules

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

easy

A. class User { name = string; }

B. class User { name: string; }

C. class User { string name; }

D. class User { name -> string; }

Solution

1. Step 1: Recall TypeScript property syntax

   In TypeScript, properties are declared with a colon between name and type, like name: string;.

2. Step 2: Check each option

   class User { name: string; } uses correct syntax. Options A, B, and C use invalid syntax.

3. Final Answer:

   class User { name: string; } -> Option B

4. Quick Check:

   Property declaration uses colon = D [OK]

Hint: Use colon between property and type in classes [OK]

Common Mistakes:

• Using equals sign instead of colon for type
• Placing type before property name
• Using arrows or other symbols instead of colon

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

class Product {
  name: string;
  price: number;
  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }
  display() {
    return `${this.name} costs $${this.price}`;
  }
}
const item = new Product('Book', 15);
console.log(item.display());

medium

A. Book costs $15

B. Book costs $15.00

C. undefined costs $15

D. Error: price is not a string

Solution

1. Step 1: Understand class and constructor

   The constructor sets name to 'Book' and price to 15.

2. Step 2: Check display method output

   The display method returns a string combining name and price exactly as "Book costs $15".

3. Final Answer:

   Book costs $15 -> Option A

4. Quick Check:

   Display method returns formatted string = C [OK]

Hint: Check constructor values and string template output [OK]

Common Mistakes:

• Expecting price to show decimals automatically
• Confusing undefined property values
• Thinking type mismatch causes runtime error here

4. Identify the error in this TypeScript class and fix it:

class Person {
  age: number;
  constructor(age: string) {
    this.age = age;
  }
}

medium

A. Change constructor parameter type to number

B. Change property type to string

C. Remove type annotations completely

D. No error, code is correct

Solution

1. Step 1: Compare property and constructor types

   The property age is a number, but constructor expects a string parameter.

2. Step 2: Fix type mismatch

   Change constructor parameter type to number to match property type.

3. Final Answer:

   Change constructor parameter type to number -> Option A

4. Quick Check:

   Property and parameter types must match = A [OK]

Hint: Match constructor parameter types with property types [OK]

Common Mistakes:

• Ignoring type mismatch between property and parameter
• Changing property type unnecessarily
• Assuming no error when types differ

5. You want to create a typed class in TypeScript that holds a list of users with their names and ages. Which approach best ensures type safety and easy maintenance?

hard

A. Use a class with properties typed as strings only.

B. Use a class with any type for properties to allow flexibility.

C. Use plain JavaScript objects without types for faster coding.

D. Use a class with typed properties and an array of user objects typed with an interface.

Solution

1. Step 1: Consider type safety and maintenance

   Typed properties and interfaces help catch errors and make code clear for teamwork.

2. Step 2: Evaluate options

   A class with typed properties and an array of user objects typed with an interface ensures safety and clarity. Other options sacrifice safety or clarity.

3. Final Answer:

   Use a class with typed properties and an array of user objects typed with an interface. -> Option D

4. Quick Check:

   Typed classes + interfaces = best practice [OK]

Hint: Combine typed classes with interfaces for clear, safe code [OK]

Common Mistakes:

• Using any type loses type safety
• Ignoring interfaces reduces code clarity
• Typing all properties as strings limits data accuracy