Class property declarations in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of class property initialization

What is the output of this TypeScript code when creating an instance of Person and logging person.name?

Typescript

class Person {
  name: string = "Alice";
  constructor() {
    this.name = "Bob";
  }
}
const person = new Person();
console.log(person.name);

A "Alice"

B "Bob"

C undefined

D TypeError

💡 Hint

Class property initializers run before the constructor body.

The property name is first initialized to "Alice". Then the constructor runs and sets name to "Bob". So the final value is "Bob".

❓ Predict Output

intermediate

Readonly class property behavior

What happens when this TypeScript code runs?

Typescript

class Car {
  readonly model: string = "Tesla";
  constructor() {
    this.model = "BMW";
  }
}
const car = new Car();
console.log(car.model);

A "Tesla"

B "BMW"

C Compile-time error

D Runtime error

💡 Hint

Readonly properties cannot be assigned after initialization.

The assignment to this.model inside the constructor is not allowed because model is readonly. TypeScript will report a compile-time error.

🔧 Debug

advanced

Why does this code throw an error?

This TypeScript class has a property declared but the code throws an error when creating an instance. What is the cause?

Typescript

class Counter {
  count: number;
  increment() {
    this.count++;
  }
}
const c = new Counter();
c.increment();
console.log(c.count);

A "count" is not initialized before use, causing undefined increment error

B "count" should be declared as readonly

C Class must have a constructor to declare properties

D "increment" method is missing a return type

💡 Hint

Check if the property has a starting value before incrementing.

The property count is declared but not initialized, so it is undefined. Incrementing undefined causes a runtime error.

📝 Syntax

advanced

Identify the syntax error in class property declaration

Which option contains a syntax error in declaring a class property in TypeScript?

Typescript

class User {
  // property declarations here
}

A email string = "[e-mail]";

B age: number;

C isActive = true;

D name: string = "John";

💡 Hint

Check the order of type and variable name.

Option A misses the colon between the property name and its type. It should be email: string = "[e-mail]";

🚀 Application

expert

How many properties does this class instance have?

Given this TypeScript class, how many own properties will an instance have immediately after creation?

Typescript

class Book {
  title: string = "";
  author: string;
  static category: string = "Fiction";
  constructor(author: string) {
    this.author = author;
  }
}
const novel = new Book("Jane Austen");

A 1

B 3

C 0

D 2

💡 Hint

Static properties are not part of instance properties.

The instance novel has two own properties: title (initialized) and author (set in constructor). The static property category belongs to the class, not the instance.

Practice

1. What is the purpose of declaring properties inside a TypeScript class?

easy

A. To import external modules into the class

B. To define functions that the class can use

C. To create new classes inside the current class

D. To store data related to each object created from the class

Solution

1. Step 1: Understand what class properties represent

   Class properties hold data or information specific to each object created from the class.

2. Step 2: Differentiate properties from methods and other elements

   Functions inside classes are called methods, not properties. Properties are for storing values.

3. Final Answer:

   To store data related to each object created from the class -> Option D

4. Quick Check:

   Class properties = store object data [OK]

Hint: Properties hold object data, methods hold actions [OK]

Common Mistakes:

• Confusing properties with methods
• Thinking properties create new classes
• Believing properties import modules

2. Which of the following is the correct way to declare a class property with a type and default value in TypeScript?

easy

A. class Car { speed: = 0 number; }

B. class Car { speed: number = 0; }

C. class Car { number speed = 0; }

D. class Car { speed = number 0; }

Solution

1. Step 1: Recall TypeScript property syntax

   Properties are declared as name: type = defaultValue;.

2. Step 2: Check each option for correct syntax

   class Car { speed: number = 0; } matches the correct syntax: speed: number = 0;. Others have incorrect order or missing punctuation.

3. Final Answer:

   class Car { speed: number = 0; } -> Option B

4. Quick Check:

   Property syntax = name: type = value [OK]

Hint: Use colon for type, equals for default value [OK]

Common Mistakes:

• Swapping type and value order
• Missing colon between name and type
• Using wrong punctuation

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

class Person {
  name: string = "Alice";
  age: number = 30;
}
const p = new Person();
console.log(p.name + ' is ' + p.age + ' years old');

medium

A. "Alice is 30 years old"

B. "undefined is undefined years old"

C. Error: Property 'name' does not exist

D. "Alice is undefined years old"

Solution

1. Step 1: Understand property initialization

   The class Person has properties name and age initialized with "Alice" and 30 respectively.

2. Step 2: Check the output of console.log

   Creating an object p sets these properties. The log concatenates them into the string "Alice is 30 years old".

3. Final Answer:

   "Alice is 30 years old" -> Option A

4. Quick Check:

   Initialized properties print correct values [OK]

Hint: Default values print as expected when object created [OK]

Common Mistakes:

• Assuming properties are undefined without constructor
• Confusing property names or types
• Expecting runtime errors without syntax mistakes

4. Identify the error in this TypeScript class property declaration:

class Book {
  title string = "Unknown";
  pages: number = 100;
}

medium

A. Class name should be lowercase

B. Missing default value for 'pages' property

C. Missing colon ':' between property name and type in 'title string = "Unknown";'

D. Properties cannot have default values

Solution

1. Step 1: Check syntax of property declarations

   Property declarations require a colon ':' between the name and type, like title: string.

2. Step 2: Identify the incorrect line

   The line title string = "Unknown"; misses the colon, causing a syntax error.

3. Final Answer:

   Missing colon ':' between property name and type in 'title string = "Unknown";' -> Option C

4. Quick Check:

   Property syntax requires colon ':' [OK]

Hint: Always put ':' between property name and type [OK]

Common Mistakes:

• Omitting colon between name and type
• Thinking default values are not allowed
• Ignoring case sensitivity of class names (not an error)

5. You want to create a TypeScript class Student with a property grades that stores an array of numbers and defaults to an empty array. Which is the correct declaration to ensure each object has its own separate array?

hard

A. class Student { grades: number[] = []; }

B. class Student { static grades: number[] = []; }

C. class Student { grades: number[]; } // no default value

D. class Student { grades = []; }

Solution

1. Step 1: Understand instance vs static properties

   Instance properties belong to each object separately; static properties are shared by all objects.

2. Step 2: Check which option creates separate arrays per object

   class Student { grades: number[] = []; } declares grades as an instance property with default empty array, so each object gets its own array.

3. Step 3: Analyze other options

   class Student { static grades: number[] = []; } uses static, so all objects share one array (not desired). class Student { grades: number[]; } // no default value has no default, so array is undefined unless set later. class Student { grades = []; } misses type annotation explicitly, inferring any[] instead of number[].

4. Final Answer:

   class Student { grades: number[] = []; } -> Option A

5. Quick Check:

   Instance property with default array = separate arrays [OK]

Hint: Use instance property with default [] for separate arrays [OK]

Common Mistakes:

• Using static for properties needing separate values
• Not initializing arrays causing undefined errors
• Omitting type annotation (less clear)